找出在真实浏览器中选择的内容就像这样简单:
var range = {
start: textbox.selectionStart,
end: textbox.selectionEnd
}
但是像往常一样,IE并不理解。什么是最好的跨浏览器实现方式?
找出在真实浏览器中选择的内容就像这样简单:
var range = {
start: textbox.selectionStart,
end: textbox.selectionEnd
}
但是像往常一样,IE并不理解。什么是最好的跨浏览器实现方式?
focus()
方法。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的范围实现是一种可怕的恶梦。它真的希望你使用令人讨厌的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 ();
}
}