在 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.htmlMSDN 上的 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 中的表格宽度