CODEWITHSUNDEEP
javascripthtmlcss
Pekka
Pekka

Reputation: 449713

"Scroll" to the very right of a long text input

I have an image selector that allows to choose an image from a gallery, then fills in the URL into a <input type="text"> field. The URLs can be awfully long, and always seeing the first half of the URL in the text field has very little informational value.

Does somebody know a way to "scroll" to the very right of the text field so that the end of the URL is visible instead of the beginning? Without resorting to a textarea.

Upvotes: 26

Views: 34014

Answers (5)

Michele Peghini
Michele Peghini

Reputation: 35

You could just simply set the CSS property direction to "rtl" (right to left), no JS required. This will change the scrolling direction as well as text-alignment, so it might look odd when the text is shorter than the size of the input but, given that the input will always contain a long url, it should't be an issue.

input {
  margin: 10px;
  direction: rtl;
}
<input type="text" value="short url" size="20">
<br>
<input type="text" value="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" size="20">

I hope this helps.

Upvotes: 1

BalusC
BalusC

Reputation: 1109362

All browsers except IE6-8/Opera

Set HTMLInputElement.setSelectionRange() to the length of the input value after explicitly setting the focus(). The disadvantage is that it scrolls back to start once blurred.

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);
<input id="foo">

All browsers except IE/Opera

If you don't care about IE in its entirety, then set Element.scrollLeft to Element.scrollWidth. The disadvantage is the less browser support.

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.scrollLeft = foo.scrollWidth;
<input id="foo">

All browsers

If you'd like to support every single browser, consider to trick it with the dir (direction) attribute which you set to rtl (right-to-left). The disadvantage is that it's a hack which really need to be taken into consideration when it's editable and/or you develop a direction sensitive website, but this works on all browsers and is great on readonly inputs.

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
<input id="foo" dir="rtl">

Upvotes: 41

Stephen Kaiser
Stephen Kaiser

Reputation: 1545

Lucman Abdulrachman's answer is the best, but I can't upvote it, so I'm adding another solution without using jQuery:

var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;

Upvotes: 26

Lucman Abdulrachman
Lucman Abdulrachman

Reputation: 393

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;

Upvotes: 20

Stein G. Strindhaug
Stein G. Strindhaug

Reputation: 5119

A better solution would be to make the input large enough to see most reasonable length urls. The default width of the input is usually really short. By reducing the font size and increasing the width (possibly by a percentage to fill available space) you could probably make url's that ar as long or longer than the url bar of your browser, visible. You don't really need very large text for an url since you're probably just verifying that it looks reasonable, not read it.

If being able to view the whole url, in relatively large font is important (if the user is expected be an advanced user and possibly will edit the url manualy), you should concider using a text area. It will look a bit strange with the url randomly wordwrapped, but as long as you don't insert whitespace the url should still be valid.

If your web server are responsible for generating the url's, you could try to make it less verbose. You could also save space if you can use relative url's (skipping the domain part).

Upvotes: 1

Related Questions