在 Internet Explorer 中设置文本区域选择答案

【问题标题】：Set textarea selection in Internet Explorer在 Internet Explorer 中设置文本区域选择
【发布时间】：2010-12-31 03:59:17
【问题描述】：

我正在寻找一种在 Internet Explorer 的文本区域中设置选择的方法。在其他浏览器中，这工作得很好：

textarea.selectionStart = start;
textarea.selectionEnd = end;

在 IE 中，我假设我必须使用 createRange 并以某种方式调整选择，但我不知道如何。

关于createRange 和相关方法的正确文档的链接的额外奖励积分，MSDN 没有多大帮助。

【问题讨论】：

+1 - 我看过这个。我不记得细节（对不起），但它很粘。 IE 非常无用。我不得不在我的表单设计中做出某种妥协。

标签： javascript internet-explorer textarea range selection

【解决方案1】：

这对我有用：

<textarea id="lol">
noasdfkvbsdobfbgvobosdobfbgoasopdobfgbooaodfgh
</textarea>

<script>
var range = document.getElementById('lol').createTextRange();
range.collapse(true);
range.moveStart('character', 5);
range.moveEnd('character', 10);
range.select();
</script>

有用的链接：

MSDN 上的 moveStart()：http://msdn.microsoft.com/en-us/library/ms536623%28VS.85%29.aspx

MSDN 上的 moveEnd()：http://msdn.microsoft.com/en-us/library/ms536620%28VS.85%29.aspx

【讨论】：

太好了，它确实有效。 moveEnd 显然相对于起始位置移动了选择，因此它的行为与.selectionEnd 不同。很棒的链接，谢谢！希望我承诺的奖励积分会通过其他人的支持来实现:)

【解决方案2】：

试试

function select(e, start, end){
     e.focus();
     if(e.setSelectionRange)
        e.setSelectionRange(start, end);
     else if(e.createTextRange) {
        e = e.createTextRange();
        e.collapse(true);
        e.moveEnd('character', end);
        e.moveStart('character', start);
        e.select();
     }
}
select(document.getElementById('textarea_id'), 5, 10);

【讨论】：

+1 用于创建浏览器感知函数并首先移动末端，因此不需要算术运算。很遗憾我不能接受两个正确的答案，watain 是第一个并提供了链接:)
谢谢。我知道，watain 是第一个并提供了一些文档链接，所以他的答案是被标记为接受的答案。
重复使用变量名 'e' 让我失望，但我想我明白你在做什么了。
显然 IE9+ 支持 setSelectionRange()：developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/…

【解决方案3】：

如前所述，移动方法将行分隔符视为一个字符 (\n) 而不是两个 (\r\n)。我已经调整了例程来弥补这一点：

function select(el, start, end) {
    el.focus();

    if (el.setSelectionRange) { 
        el.setSelectionRange(start, end);
    } 
    else { 
        if(el.createTextRange) { 
            var normalizedValue = el.value.replace(/\r\n/g, "\n");

            start -= normalizedValue.slice(0, start).split("\n").length - 1;
            end -= normalizedValue.slice(0, end).split("\n").length - 1;

            range=el.createTextRange(); 
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start); 
            range.select();
        } 
    }
}

【讨论】：

【解决方案4】：

注意行分隔符，move* 方法将它们视为一个字符，但实际上它们是两个 - \r\n

【讨论】：