如何将光标设置到 Internet Explorer 中文本 INPUT 字段的字符串值中的特定位置？

Posted 2023-04-18

【中文标题】如何将光标设置到 Internet Explorer 中文本 INPUT 字段的字符串值中的特定位置？

【英文标题】：How do I set the cursor to a particular position in the string value of a text INPUT field in Internet Explorer?

【发布时间】：2011-10-12 22:34:27

【问题描述】：

我已经在 Firefox、Safari 和 Chrome 中使用了这个功能。

我希望能够以编程方式在 Internet Explorer 的 INPUT 字段中设置文本光标的位置。

我在各种网站上查找了这个主题，并且发现了相同的技术：

var el = document.getElementById("myTextField");
var pos = 6;

if (document.selection) 
    el.focus();
    var selection = document.selection.createRange();
    selection.moveStart("character", -el.value.length);
    selection.moveStart("character", pos);
    selection.moveEnd("character", 0);
    selection.select();

问题是当我尝试这样做时，无论我提供什么位置，光标总是会到达值的末尾。

我是否误解了人们一直在使用的技术？我在某个地方错过了什么吗？这有点令人沮丧，但这当然是使用这些不同浏览器进行 Web 开发的本质。

提前感谢您的帮助。

【问题讨论】：

你测试的是哪个版本的IE，从我发现这个脚本是针对IE6的，没有在以后的版本中测试过。

您需要支持哪些版本的IE？看起来他们对可接受的格式更挑剔。查看 Quirks 兼容性图表 - quirksmode.org/dom/range_intro.html

我一直在 Internet Explorer 7 和 8 中进行测试。Internet Explorer 9 似乎与我用来处理 Firefox 的代码配合得很好。

【参考方案1】：

以下代码在 IE 9 中为我工作

<script type="text/javascript">
    var input = document.getElementById("myInput");
    input.selectionStart = 2;
    input.selectionEnd = 5;
</script>

这是我用于 IE 6 的代码

      input.select();
        var sel = document.selection.createRange();
        sel.collapse();
        sel.moveStart('character', this.SelectionStart);
        sel.collapse();
        sel.moveEnd('character', this.SelectionEnd - this.SelectionStart);
        sel.select();  

【讨论】：

谢天谢地，我的公司并未正式支持 Internet Explorer 6，所以我对此很清楚。在使用 Internet Explorer 9 时，我似乎在与 Mozilla 和 Webkit 浏览器一起工作的代码上取得了成功，所以我很好。我现在只关注 Internet Explorer 7 和 8。我实际上找到了一个在这两种浏览器中都可以使用不同对象的解决方案。我现在家里没有代码 - 我明天到办公室后会发布。感谢大家的回复！