我正在尝试制作自己的WYSIWYG编辑器。有什么办法,如何获取用户在textarea中选择的文本?
例如,如果用户选择某个单词然后单击按钮,我如何找出选择了哪个文本?
我正在使用jQuery。
我正在尝试制作自己的WYSIWYG编辑器。有什么办法,如何获取用户在textarea中选择的文本?
例如,如果用户选择某个单词然后单击按钮,我如何找出选择了哪个文本?
我正在使用jQuery。
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。
参考:
不同浏览器的处理选择不同:
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 插件。它可能足以满足您的需求,或者至少可以为您提供一些开始。
试试 jquery-fieldselection 插件。
你可以从这里下载。还有一个例子。
获取选择()
这因浏览器而有所不同,请参阅此处以了解声称可以在大多数情况下使用的功能:http : //snipplr.com/view/775/getselection/
一个小函数,它将获取 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。