Question

我想在文本区域内获取插入位置（仅限Internet Explorer）。我有这个：

document.activeElement.focus();             
var sel2 = document.selection.createRange();
sel2.moveStart('character', -document.activeElement.value.length);
var caretPos = sel2.text.length;
alert(caretPos);

如果textarea只有一行我得到正确的结果，但如果有很多行，结果是错误的，因为新行需要额外的char，这是不可见的......

如何获得正确的位置值（不删除\ r \ n和类似的脏工作）？

Answer 1

我认为在计算选择边界/光标位置时将换行计数为两个字符是正确的方法。从根本上说，文本中有两个字符\r\n。它们存在于textarea的value属性中，并且它们是提交给服务器的值。

我可以看到将换行计数作为一个字符的唯一参数是：

与其他浏览器的一致性
IE的TextRange方法将换行符视为一个字符

我认为两者都无效。首先，IE在将换行符计为两个字符而不是一个字符时已经与其他浏览器不一致。其次，IE的TextRange基于字符的方法无论如何都有点疯狂，无论在哪里使用都会产生问题。

我认为将选择/插入位置视为相对于textarea中实际文本的位置是完全有意义的。这样可以轻松操作文本。

这是两个主要功能。第一个是我见过的唯一一个textarea选择/插入位置获取功能，可以正常使用所有换行符。你可以在这里找到： How to get the start and end points of selection in text area?。其次，这是一个互补的setSelection函数：

function offsetToRangeCharacterMove(el, offset) {
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setSelection(el, startOffset, endOffset) {
    var range = el.createTextRange();
    var startCharMove = offsetToRangeCharacterMove(el, startOffset);
    range.collapse(true);
    if (startOffset == endOffset) {
        range.move("character", startCharMove);
    } else {
        range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
        range.moveStart("character", startCharMove);
    }
    range.select();
}

获得textarea（IE）的插入位置

1 个答案: