找出在真实浏览器中选择的内容非常简单:
var range = {
start: textbox.selectionStart,
end: textbox.selectionEnd
}
但 IE 和往常一样,不明白。执行此操作的最佳跨浏览器方式是什么?
找出在真实浏览器中选择的内容非常简单:
var range = {
start: textbox.selectionStart,
end: textbox.selectionEnd
}
但 IE 和往常一样,不明白。执行此操作的最佳跨浏览器方式是什么?
我将再次发布此功能,因为这个问题与另一个问题相关联。
以下将在所有浏览器中完成这项工作,并在不严重影响性能的情况下处理所有新行问题。经过一番折腾,我终于找到了这个,现在我非常确信这是最好的此类功能。
更新
此函数确实假定 textarea/input 具有焦点,因此您可能需要在调用focus()
之前调用textarea 的方法。
function getInputSelection(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;
}
}
}
}
return {
start: start,
end: end
};
}
var el = document.getElementById("your_input");
el.focus();
var sel = getInputSelection(el);
alert(sel.start + ", " + sel.end);
IE 的 Range 实现是一个狭隘的恐怖。它真的希望您使用 execrable execCommand 接口,而不是任何涉及对文本进行索引的操作。
我知道有两种获取索引的方法,它们都有问题。第一个使用 range.text 作为您的示例代码。不幸的是 range.text 有剥离前导和尾随换行符的习惯,这意味着如果插入符号/选择位于第一行以外的行的开头,则 beforeLength 将关闭(换行数*2)个字符,并且您会得到错误的选定文本。
第二种方法是使用 range.moveStart/End(在重复的范围内),如以下问题的答案所述:Internet Explorer TextRange 中的字符偏移(但是,当您使用已知的 textarea 父级时,您可以忽略有关节点查找)。这没有相同的问题,但它确实报告所有索引,就好像换行符是简单的 LF 字符一样,即使 textarea.value 和 range.text 会将它们作为 CRLF 序列返回!因此,您不能直接使用它们来索引 textarea,但是您可以使用一堆换行符计数来修复它们,或者在使用之前将值中的所有 CR 字符串替换掉。
我当前的解决方案是冗长的并且基于此线程,但我愿意接受更好的解决方案。
function getSelection(inputBox) {
if ("selectionStart" in inputBox) {
return {
start: inputBox.selectionStart,
end: inputBox.selectionEnd
}
}
//and now, the blinkered IE way
var bookmark = document.selection.createRange().getBookmark()
var selection = inputBox.createTextRange()
selection.moveToBookmark(bookmark)
var before = inputBox.createTextRange()
before.collapse(true)
before.setEndPoint("EndToStart", selection)
var beforeLength = before.text.length
var selLength = selection.text.length
return {
start: beforeLength,
end: beforeLength + selLength
}
}
function getCursorPosition($element) {
var position = 0,
selection;
if (document.selection) {
// IE Support
$element.focus();
selection = document.selection.createRange();
selection.moveStart ('character', -$element.value.length);
position = selection.text.length;
} else if ($element.selectionStart || $element.selectionStart === 0) {
position = $element.selectionStart;
}
return position;
}
function setCursorPosition($element, position) {
var selection;
if (document.selection) {
// IE Support
$element.focus ();
selection = document.selection.createRange();
selection.moveStart ('character', -$element.value.length);
selection.moveStart ('character', position);
selection.moveEnd ('character', 0);
selection.select ();
} else if ($element.selectionStart || $element.selectionStart === 0) {
$element.selectionStart = position;
$element.selectionEnd = position;
$element.focus ();
}
}