41

我正在尝试制作自己的所见即所得编辑器。有什么办法，如何获取用户在 textarea 中选择的文本？

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

我正在使用jQuery。

4

6 回答 6

80

window.getSelection().toString()对我有用 Chrome 但不是 Firefox。

<textarea>使用 Firefox获取所选内容：

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。

参考：

于 2012-12-10T06:46:33.790 回答
18

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

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

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

您现在拥有的范围对象类型取决于浏览器。对于 IE，它是一个 Text Range 对象；对于其他人，它是一个选择对象。要将 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 插件。它可能足以满足您的需求，或者至少可以为您提供一些开始。

于 2009-04-04T15:58:59.170 回答
9

试试 jquery-fieldselection 插件。

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

于 2009-04-04T14:59:45.333 回答
9

获取选择（）

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

于 2009-04-04T15:02:13.800 回答
6

一个小函数，它将获取文本区域或输入元素的选定字符串/文本：

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。

于 2012-12-27T15:07:31.857 回答
-2 
function getSel() {
var input = $("#text");
return input.html().toString().substring(getSelection().baseOffset,getSelection().extendOffset);
}
于 2013-10-20T09:23:55.910 回答