如何移动窄输入元素中的可见文本以在末尾看到光标？答案

【问题标题】：How do I shift the visible text in a narrow input element to see the cursor at the end?如何移动窄输入元素中的可见文本以在末尾看到光标？
【发布时间】：2009-03-21 04:03:41
【问题描述】：

我遇到的问题是，给定一个最大长度的输入元素比元素的宽度宽得多（在其样式中设置），并且，给定一个比元素宽度宽的值，我怎么能得到要“滚动”到文本末尾的元素。在 IE 中很容易，我创建了一个 textRange 对象，将它的开始和结束位置放在文本的末尾，在该范围上调用 select，然后 bam，光标放在文本的末尾并且文本被移动了显示结束。在 Firefox、Chrome、Safari 中，尝试使用输入元素的 setSelectionRange 将光标设置在正确的位置，但文本没有移动，所以我看到它的结尾，而是开始。有人知道我可以将光标放在文本末尾并移动文本以便我可以看到光标的方法吗？

谢谢！

肖恩

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
      function setCursor()
      {
         var objInput = document.getElementById( 'testinputbox' );
         var nLength = objInput.value.length;

         objInput.focus();
         objInput.setSelectionRange( nLength, nLength );
      }
    </script>
  </head>
  <body onload='setCursor();'>
    <input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

【问题讨论】：

这是遥远的未来，两千年。我们是网络开发人员。自 90 年代末的 HTML4 规范以来，世界就大不相同了。我们不再使用
This solution，适用于，也适用于 <input>。至少对于 Chrome。

标签： javascript html firefox w3c

【解决方案1】：

我怀疑这是一个很棒的跨浏览器解决方案，但它似乎可以在 Firefox 中解决。我最初是通过模拟右箭头键按下来尝试的，但没有任何运气。

function setCursor(id)
{
    var elem = document.getElementById(id);

    elem.focus();
    elem.setSelectionRange(elem.value.length, elem.value.length);

    // Trigger a "space" keypress.
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
    elem.dispatchEvent(evt);

    // Trigger a "backspace" keypress.
    evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
    elem.dispatchEvent(evt);
}

有关 initKeyEvent here 的更多信息。

【讨论】：

非常感谢这个，这对我来说就像在 Firefox 中一样，现在是时候让我弄清楚如何让 Safari/Chrome 符合我的意愿了！再次感谢！
见stackoverflow.com/questions/29899364/…。 1) initKeyEvent 现在已弃用。 2）看来你可以在设置焦点后做new KeyboardEvent('keypress')（不需要空格+退格）。

【解决方案2】：

这是一个杂牌，但它有效：

编辑：进一步整合到实际工作中：

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
function setatend() {
    var save = document.getElementById("mytextbox").value;
    mytextbox.focus(); 
    mytextbox.value = save; 
}
function setfocus() {
    var box = document.getElementById("mytextbox");
    box.focus();    
}
</script>
  </head>
      <body onload='setfocus();'>
    <input onfocus='setatend();' id='mytextbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

【讨论】：

您需要将代码缩进 4 个空格才能获得正确的格式。
这种方法是我最初的解决方案，它确实将光标放在最后，但它并没有像我希望的那样移动内容。非常感谢！
通过进一步的kludgery修复它。