How do I shift the visible text in a narrow input element to see the cursor at the end?

问题

The problem I am having is that given an input element with a maxlength that is much wider than the element's width (as set in its style), and, given a value that is wider than the element's width, how can I get the element to "scroll" to the end of the text. In IE it is easy, I create a textRange object, put its start and end position at the end of the text, call select on that range, and bam, the cursor is placed at the end of the text AND the text is shifted so that the end is shown. In Firefox, Chrome, Safari, trying to use the input element's setSelectionRange sets the cursor in the right position, but the text is not shifted so that I see its end, but instead the beginning. Does anybody know of a way I could go about placing the cursor at the end of the text AND shifting the text so that I can see the cursor?

Thank you!

Shane

<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>

回答1:

I doubt this is a great cross-browser solution, however it does seem to be a work around in Firefox. I originally tried it by simulating the right arrow-key press, but didn't have any luck.

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);
}

More info on initKeyEvent here.

回答2:

It is a kludge, but it works:

Edit: further kludged to actually work:

<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>

来源：https://stackoverflow.com/questions/668720/how-do-i-shift-the-visible-text-in-a-narrow-input-element-to-see-the-cursor-at-t

标签

javascript

html

firefox

w3c