如何在textarea中获取选定的文本?

IT技术 javascript jquery
2021-02-08 17:45:21

我正在尝试制作自己的WYSIWYG编辑器。有什么办法,如何获取用户在textarea中选择的文本?

例如,如果用户选择某个单词然后单击按钮,我如何找出选择了哪个文本?

我正在使用jQuery

6个回答

window.getSelection().toString()为我工作 Chrome 但不是 Firefox

<textarea>使用 Firefox在 a 中获取所选内容

function getSel() // javascript
{
    // obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    // obtain the selected text
    var sel = txtarea.value.substring(start, finish);
    // do something with the selected content
}

您还可以使用activeElement而不是getElementById

参考:

window.getSelection().toString()做完全一样的事情,你不需要知道 textarea 的 id。您不能同时在不同的文本区域中进行多个选择。
2021-03-15 17:45:21
事实上,Firefox 中存在一个错误,该错误已于 2001 年(!)提交。我在我的回答中提到了这一点
2021-03-16 17:45:21
@DanDascalescu 我以前试过,现在试过。它适用于 Chrome,但似乎不适用于 FireFox。
2021-03-20 17:45:21
正确 - 结果是 2001 年提交的 Firefox 错误关于 window.getSelection() 在 textareas 中不起作用!
2021-03-25 17:45:21

不同浏览器的处理选择不同:

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

这给了你一个范围对象。每个范围代表一个选择(使用控制/命令键可以进行多个活动选择)。

您现在拥有的范围对象类型取决于浏览器。对于 IE,它是一个 Text Range 对象;对于其他人,它是一个 Selection 对象。要将 Selection 对象转换为文本范围,可以调用 getRangeAt; 对于 Safari,您需要构建:

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

range 对象为您提供选择的起始和结束 dom 元素以及文本偏移量。

有关范围对象的更多信息,请访问quirksmode.org 此处

如果您正在使用 jQuery,您可能需要查看Batiste Bieler轻量级 jQuery RTE 插件它可能足以满足您的需求,或者至少可以为您提供一些开始。

非常有用和信息丰富的答案。
2021-03-15 17:45:21

试试 jquery-fieldselection 插件。

你可以从这里下载还有一个例子。

在 Internet Explorer 7 中对我不起作用。
2021-03-19 17:45:21
replaceSelection插件的功能在 Chrome 和 Firefox 中对我不起作用。
2021-03-26 17:45:21

获取选择()

这因浏览器而有所不同,请参阅此处以了解声称可以在大多数情况下使用的功能:http : //snipplr.com/view/775/getselection/

以上代码在 Firefox 浏览器 (61.0.1) @tpdi 中不起作用
2021-04-03 17:45:21
您如何在特定textarea元素上使用此功能
2021-04-11 17:45:21

一个小函数,它将获取 textarea 或 input 元素的选定字符串/文本:

function getInputSelection(elem){
 if(typeof elem != "undefined"){
  s=elem[0].selectionStart;
  e=elem[0].selectionEnd;
  return elem.val().substring(s, e);
 }else{
  return '';
 }
}

请注意,上面的代码需要jQuery才能工作。获取 id 为abc123的输入元素的选定字符串的示例

getInputSelection($("#abc123"));

上面的函数将返回选定的字符串。如果没有用户选择的字符串,则返回null

更多例子

getInputSelection($("body").find("input[name=user]"));

在使用类名选择的元素上,返回元素数组第一个元素的选定字符串,而不是所有元素的选定字符串。毕竟,页面中的选择总是1

我喜欢将任何元素传递到你的函数中的能力,它使它更便携/可重用。
2021-03-30 17:45:21
请举例说明。
2021-04-02 17:45:21