3

我遇到的问题是，给定一个 maxlength 比元素宽度宽得多的输入元素（如在其样式中设置的那样），并且，给定一个比元素宽度宽的值，我怎样才能让元素“滚动”到文本的末尾。在 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>
4

2 回答 2

7

我怀疑这是一个很棒的跨浏览器解决方案，但它似乎可以在 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 的更多信息，请点击此处。

于 2009-03-21T06:20:03.113 回答
2

这是一个kludge，但它的工作原理：

编辑：进一步kludged实际工作：

<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>
于 2009-03-21T13:34:09.030 回答