我正在尝试在textarea中检索/查找选择的起点和终点。 这是我的代码在Mozilla和chrome中运行良好,但在IE9中不起作用
<script type="txt/javascript">
function update(o) {
var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
alert("start :" + s + " End :" + e);
}
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
rse = r.text.length;
r.moveEnd('character', o.value.length)
if (r.text == '') return o.value.length
return o.value.lastIndexOf(r.text)
} else return o.selectionStart
}
function getSelectionEnd(o) {
if (o.createTextRange) {
var r = document.selection.createRang;e().duplicate()
r.moveStart('character', -o.value.length)
return r.text.length
} else return o.selectionEnd
}
</script>
<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>
当我在Mozilla和chrome中测试此代码时,它给出了正确答案,但是当我在IE9上运行此代码时 它显示-1表示开始,任何值表示结束。
我想找出textarea选择文本的开始和结束点/索引。实际上,上面的代码适用于所有浏览器中的文本框,但不适用于textarea。
请建议我......
答案 0 :(得分:8)
使用以下代码或查看fiddle
function getTextSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
alert("start :" + start + " End :" + end);
}
答案 1 :(得分:2)
虽然最初的答案可能在2012年帮助OP,但事情已经发生了变化,现在变得更加简单了,至少在现代浏览器中是这样。
selectionStart
和selectionEnd
属性。基本用法:
这些都是适用于当今主流浏览器(Chrome,Safari,Firefox,Opera,Edge,IE)的标准属性。
例如:
console.log(document.getElementById("text").selectionStart,document.getElementById("text").selectionEnd)
将返回带有ID text
的textarea中所选内容的起点和终点。
边界案例:
如果textarea中没有选择任何项目,则start和end属性都将返回caret的最后位置。如果textarea尚未收到焦点,则属性将返回值0
。
更改选择
通过将这些属性设置为新值,您将调整活动文本选择。因此,您也可以使用它来选择文本区域中的文本。
检查选择是否到位:
您可以通过检查值是否不同来检查当前是否存在选择,即
document.getElementById("text").selectionStart != document.getElementById("text").selectionEnd
是真的,然后有文字选择。