3

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>
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Shane Tomlinson
  • 3,310
  • 3
  • 19
  • 12
  • 3
    It is the distant future, the year two-thousand. We are web developers. The world is quite different ever since the HTML4 specification of the late nineties. We no longer use – Matt Aug 12 '10 at 04:19
  • [This solution](https://stackoverflow.com/a/40951875/), which applies for – user202729 Mar 26 '20 at 03:50

3 Answers3

7

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.

jthompson
  • 7,178
  • 2
  • 34
  • 33
  • Thanks a bunch for this one, this works for me as is in Firefox, now time for me to figure out how to make Safari/Chrome bend to my will! Thanks again! – Shane Tomlinson Mar 21 '09 at 17:22
  • 1
    See http://stackoverflow.com/questions/29899364/how-do-you-scroll-to-the-position-of-the-cursor-in-a-textarea/29900204#29900204. 1) `initKeyEvent` is now deprecated. 2) It seems that you could just do `new KeyboardEvent('keypress')` after setting focus (no need for space + backspace). – Adam Zerner Apr 27 '15 at 18:40
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>
WakeUpScreaming
  • 199
  • 6
1

If You just need to scroll the element to the end then use:

document.querySelector('button').addEventListener('click', () => {
  const input  = document.querySelector('input');
  input.scrollLeft = input.scrollWidth - input.clientWidth;
});
<input value="start,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,end"/>
<br><br>
<button>Scroll</button>

scrollLeft - what's hidden on the left, 0px at start.
clientWidth - width of the visible portion of the element.
scrollWidth - width of the visible and hidden portion of the element.

Works same for vertical scroll using scrollTop, clientHeight and scrollHeight

pmad
  • 89
  • 6