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

Posted

技术标签:

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

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

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

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

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

【问题讨论】:

+1 - 我看过这个。我不记得细节(对不起),但它很粘。 IE 非常无用。我不得不在我的表单设计中做出某种妥协。 【参考方案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>

有用的链接:

http://help.dottoro.com/ljlwflaq.php http://www.webreference.com/programming/javascript/ncz/ http://www.quirksmode.org/dom/range_intro.html

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

【讨论】:

以上是关于在 Internet Explorer 中设置文本区域选择的主要内容,如果未能解决你的问题,请参考以下文章

GWT - 仅在 Internet Explorer 中设置 document.domain 时出现“拒绝访问”JavaScript 错误

Internet Explorer /Microsoft Outlook 中的表格宽度

如何在 TEdit 控件中设置文本对齐

Internet Explorer:当目标 DOM 元素在 DOM 中移动时,悬停状态变为粘滞状态

占位符文本仅在 Internet Explorer 中可见

如何在 Internet Explorer 7 中使用 jQuery 获取 textarea 中的选定文本?