如何获取文本区域中已选择的文本?
问题的出现原因:不同浏览器处理文本选择的方式不同。
解决方法:
在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插件。它可能足够满足您的需求,或者至少给您一个起点。
非常有用和信息丰富的答案。
也许是时候进行更新了。
在一个文本区域中,如何获取所选文本?
问题的原因是在使用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年被提出。我在我的回答中已经提到了这一点。