“Scroll” to the very right of a long text input

by

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">

More Related Contents:

  1. How to have html popup appear over main html page?
  2. How to create a translucent in React Native?
  3. Write tags in HTML and print
  4. Change from (+) symbol to (-) after click (function(){
  5. How to disable HTML links
  6. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  7. Refresh/reload the content in Div using jquery/ajax
  8. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  9. Can you style an html radio button to look like a checkbox?
  10. Animate element to auto height with jQuery
  11. How to style “input file” with CSS3 / Javascript? [duplicate]
  12. Changing element style attribute dynamically using JavaScript
  13. How do I clear the content of a div using JavaScript? [closed]
  14. How to get nth-child selector to skip hidden divs [duplicate]
  15. How to make div fixed after you scroll to that div?
  16. Force browser to trigger reflow while changing CSS
  17. How to auto-scroll to end of div when data is added? [duplicate]
  18. How to reorder divs using flex box?
  19. how to change the background image of div using javascript?
  20. option.style.display = “none” not working in safari [duplicate]
  21. How to scroll table’s “tbody” independent of “thead”?
  22. Check if element is between 30% and 60% of the viewport
  23. How to vertically align all text in CSS?
  24. DIV Vertical Scroll bar on left
  25. How do I detect the inherited background-color of an element using jQuery/JS?
  26. CSS /JS to prevent dragging of ghost image?
  27. Wrapping lists into columns
  28. HTML5 input required, scroll to input with fixed navbar on submit
  29. Possible to reverse a css animation on class removal?
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment