title: How do I shift the visible text in a narrow input element to see the cursor at the end?
body: <p>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?</p>
  
  <p>Thank you!</p>
  
  <p>Shane</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;input cursor position&lt;/title&gt;
      &lt;script language='javascript'&gt;
        function setCursor()
        {
           var objInput = document.getElementById( 'testinputbox' );
           var nLength = objInput.value.length;
  
           objInput.focus();
           objInput.setSelectionRange( nLength, nLength );
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload='setCursor();'&gt;
      &lt;input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'&gt;&lt;/input&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>