如何获取文本区域中已选择的文本?

13 浏览
0 Comments

如何获取文本区域中已选择的文本?

我正在尝试制作自己的WYSIWYG编辑器。有没有办法获取用户在textarea中选择的文本?例如,如果用户选择了某个单词然后点击按钮,我应该如何找出被选中的文本是什么?我正在使用jQuery。

0
0 Comments

问题的原因是作者想知道如何在一个文本区域(textarea)中获取选定的文本。文章提供了一个名为getSelection()的函数,并给出了一个链接,声称可以在大多数浏览器中使用。然而,作者发现这个链接在Firefox浏览器中不起作用,并且在大多数人看来,链接会重定向到一个登录页面。因此,作者需要一个适用于所有浏览器的方法来获取选定的文本。

解决方法是使用一个名为getSelection()的函数,该函数可以从文本区域中获取选定的文本。作者提供了一个链接,但由于链接不起作用,所以无法确定这个函数是否适用于所有浏览器。因此,需要使用其他方法来解决这个问题。

0
0 Comments

问题的出现原因:不同浏览器处理文本选择的方式不同。

解决方法:

在window对象上调用getSelection方法获取用户选择的文本,赋值给userSelection变量。

如果浏览器支持getSelection方法,则userSelection对象为Selection对象。

如果浏览器不支持getSelection方法,则userSelection对象为Text Range对象。

根据浏览器类型,将Selection对象转换为Text Range对象,可以调用getRangeAt方法获取range对象;对于Safari浏览器,需要手动创建range对象并设置起始和结束节点。

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

文章内容如下:

处理文本选择在不同浏览器中是不同的:

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

这将给你一个range对象。每个range表示一个单独的选择(使用控制/命令键可以进行多个活动选择)。

现在你拥有的range对象的类型取决于所使用的浏览器。对于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元素以及文本偏移量。

更多关于range对象的信息可以在quirksmode.org找到。

如果您使用jQuery,您可以查看Batiste Bieler的轻量级jQuery RTE插件。它可能足够满足您的需求,或者至少给您一个起点。

非常有用和信息丰富的答案。

也许是时候进行更新了。

0
0 Comments

在一个文本区域中,如何获取所选文本?

问题的原因是在使用Chrome时,window.getSelection().toString()可以正常工作,但在Firefox中无法正常工作。

对于在Firefox中获取文本区域中所选内容的方法如下:

function getSel() // JavaScript
{
    // 获取<textarea>的对象引用
    var txtarea = document.getElementById("mytextarea");
    // 获取第一个选定字符的索引
    var start = txtarea.selectionStart;
    // 获取最后一个选定字符的索引
    var finish = txtarea.selectionEnd;
    // 获取选定的文本
    var sel = txtarea.value.substring(start, finish);
    // 对选定的内容进行操作
}

你也可以使用activeElement替代getElementById

参考资料:

window.getSelection().toString()实际上也是相同的功能,而且你不需要知道文本区域的id。你不能同时在不同的文本区域中有多个选择。

我之前尝试过这种方法,现在也是如此。它在Chrome中可以正常工作,但似乎在Firefox中无法正常工作。

确实,Firefox中存在一个Bug,该Bug于2001年被提出,关于window.getSelection()在文本区域中无法工作!

事实上,在Firefox中存在一个Bug,该Bug于2001年被提出。我在我的回答中已经提到了这一点。

0