How to Scroll to the Far Right of a Text Input Without Using a Textarea?

Scrolling to the Far Right of an Extensive Text Input

In scenarios like image selectors where lengthy URLs are displayed in text fields, it becomes crucial to visualize the complete URL for enhanced comprehension. However, with the default view displaying only the initial portion, this can be limiting. Is there a technique to ensure the URL's end is visible, without relying on a textarea?

Browsers Excluding IE6-8 and Opera

A solution for most browsers involves using HTMLInputElement.setSelectionRange() in conjunction with focus() to set the text selection to the end of the input value. While this effectively scrolls to the right, the caveat is that the view reverts to the start upon losing focus.

<code class="js">const 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);</code>

<code class="html"><input id="foo"></code>

The above is the detailed content of How to Scroll to the Far Right of a Text Input Without Using a Textarea?. For more information, please follow other related articles on the PHP Chinese website!