If the content of a HTML textbox is longer than the textbox width, part of it is hidden and you need to scroll the textbox to see the end. Is there anyway to scroll it in JS or CSS to the end?

If the content of a HTML textbox is longer than the textbox width, part of it is hidden and you need to scroll the textbox to see the end. Is there anyway to scroll it in JS or CSS to the end?

• javascript
• html

2 Answers 2

Width

Here's for an <input type="text" /> and width.

var ta = document.getElementById('temp');
ta.scrollLeft = ta.scrollWidth;

And my fiddle is updated to show this.

Here's my previous response with doing it for the height.

Height

You can use scrollHeight and scrollTop on an element to do this.

var ta = document.getElementById('temp');
ta.scrollTop = ta.scrollHeight;

Fiddle: http://jsfiddle/derekaug/JGqtA/

<input id="longBox" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="longBox"/>

I would suggest this, simply when the input fields get's the focus the content is "set" so you automatically jump to the end.