ansaurus

Question

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

Answer 1

+5 A:

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 2009-03-21 06:20:03

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 2009-03-21 17:22:14

Answer 2

+1 A:

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 2009-03-21 13:34:09

You need to indent code 4 spaces to get the formatting right.

Chetan Sastry 2009-03-21 13:48:19

This approach was my original solution, and it does put the cursor at the end but it was not shifting the contents like I had hoped. Thanks a bunch!

Shane Tomlinson 2009-03-21 17:20:18

Fixed it by further kludgery.

WakeUpScreaming 2009-03-21 20:25:36

Answer 3

A:

Scrolling is much easier than setting the caret position. Simply assign to the scrollTop property.

// scroll to bottom
elt.scrollTop = elt.scrollHeight

outis 2010-03-28 20:52:42

ansaurus

tags:

views:

answers:

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

related questions