setSelectionRange 在浏览器中的行为方式不同？

Question

我在另一个问题上发现了这个：

 setCaretToPos = function(input, selectionStart, selectionEnd){
      if(input.setSelectionRange){
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);

      }else if(input.createTextRange){
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
      }
    };

 setCaretToPos(8, 12);

它应该从第 8 个字符和第 12 个字符之间的文本区域中选择文本。

它适用于 Firefox 和 Chrome，但在 Opera 中我得到了错误的选择。偏移量将两个字符移到后面

这有什么问题？

---

似乎它与换行符有关：\n 因为如果文本不包含换行符，则选择是正确的。

Answer 1

换行是 Opera 和 IE 中 textareas 中的两个字符（CRLF 或 \r\n）和其他浏览器中的一个字符（\n）。你需要为此进行调整。这里有一个函数可以做到这一点，在所有浏览器中将换行符视为单个字符。

现场演示：http://jsfiddle.net/DqtVK/1/

代码：

function adjustOffset(el, offset) {
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

var setCaretToPos = function(input, selectionStart, selectionEnd){
  input.focus();
  if(input.setSelectionRange){
    selectionStart = adjustOffset(input, selectionStart);
    selectionEnd = adjustOffset(input, selectionEnd);
    input.setSelectionRange(selectionStart, selectionEnd);

  }else if(input.createTextRange){
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
};