StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do I shift the visible text in a narrow input element to see the cursor at the end?
text
Body
copied!<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><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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload