setSelectionRange在浏览器中行为不同？ [英] setSelectionRange not behaving the same way across browsers?

问题描述

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

  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中，我选择了错误的选项。偏移在后面移动两个字符

它有什么问题？

---

看起来它与新行有关： \\\
，因为如果文本不包含换行符，选择就是正确的。

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

/1/\"> http://jsfiddle.net/DqtVK/1/

代码：

 函数adjustOffset（el，offset）{
 var val = el.value，newOffset = offset; 
 if（val.indexOf（\r\\\
）> -1）{
 var matches = val.replace（/ \\\\\\ / g，\\\
 ）.slice（0，offset）.match（/ \\\
 / g）; 
 newOffset + =匹配？ 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（）; 
} 
}; 
  

I found this on a different 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);

It should select text from a text area between the 8th character and 12th character.

It works in Firefox and Chrome, but in Opera I get the wrong selection. Offset moves two characters behind

What's wrong with it?

---

It seems it has something to do with new lines: \n because the selection is correct if the text doesn't contain new line character.

解决方案

New lines are two characters (CRLF, or \r\n) in textareas in Opera and IE and one character (\n) in other browsers. You'll need to adjust for that. Here's a function to do that, treating line breaks as a single character in all browsers.

Live demo: http://jsfiddle.net/DqtVK/1/

Code:

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();
  }
};

这篇关于setSelectionRange在浏览器中行为不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！