25

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • possible duplicate of [Use JavaScript to place cursor at end of text in text input element](http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element) – Bakudan Mar 10 '12 at 14:21

5 Answers5

40

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">
Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 2
    Very clever idea, but it changes the input behaviour for the user if they have to edit the URL manually (it behaves like a text-align: right). – Pekka Dec 25 '09 at 23:31
  • 2
    Use some JS to change the `dir` attribute on focus and blur. – BalusC Dec 25 '09 at 23:48
  • 5
    This is abusing the rtl attribute, this is actually telling the browser to expect right-to-left input (i.e. Arabic or Hebrew etc.). Even if the side effect is the desired result initially, it's very likely to cause input problems. – Stein G. Strindhaug Jun 20 '11 at 09:26
  • 1
    I have tried the `direction: rtl` (in combination with `text-align: left`) but encountered problems when the input value started with a number; the number would appear [on the right](https://stackoverflow.com/questions/8227183/rtl-is-on-web-page-reverses-numbers-with-a-dash). To overcome this, I enclosed the value in `‎` and `‏`, but this has as problem that when copying the text, you get question marks in the copied text. Also, the arrow/home/end keys work in reverse. In the end it is really a hack, so I decided to go with setting `scrollLeft`. – Dennie Jun 26 '20 at 09:10
26

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;
Community
  • 1
  • 1
Stephen Kaiser
  • 1,545
  • 14
  • 10
20
$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;
Lucman Abdulrachman
  • 293
  • 2
  • 5
  • Nice answer. The only reason wouldn't be the perfect answer is because the post tags do not include jQuery... that added that scrollLeft and scrollWidth are both present features in plain Javascript, so you're indirectly answering correctly. – Gilkan Solizaris Dec 04 '19 at 15:47
  • Found this before knowing scrollleft and scrollwidth acted as intended for input as well for sure. Nice answer, again! :) – Gilkan Solizaris Dec 04 '19 at 15:49
1

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.

Michele Peghini
  • 35
  • 3
  • this completely changes the behaviour of the keyboard navigation... solves one problem, creates another! careful – Pedro Marques Feb 04 '20 at 15:54
  • i used this on a disabled field combined with text-align:center and it works like a charm. shorter text is on the left, longer text scrolls automatically. – Plagiatus Nov 24 '20 at 16:39
1

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).

Stein G. Strindhaug
  • 5,077
  • 2
  • 28
  • 41