在长文本输入的最右侧“滚动”

Question

我有一个图像选择器，可以从图库中选择图像，然后将URL填写到<inputtype="text">字段中。这些URL可能非常长，并且始终在文本字段中看到URL的前半部分具有很少的信息价值。

有人知道一种“滚动”到文本字段最右侧的方法，以便可以看到URL的末尾而不是开头吗？不求助于textarea。

Answer 1

除IE6-8 / Opera之外的所有浏览器

设置HTMLInputElement.setSelectionRange()后明确设置输入值的长度focus()。缺点是一旦模糊，它就会滚动回开始。

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

IE / Opera以外的所有浏览器

如果您根本不关心IE，请设置Element.scrollLeft为Element.scrollWidth。缺点是浏览器支持较少。

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

所有浏览器

如果您想支持每个浏览器，请考虑使用dir设置为rtl（从右到左）的（方向）属性来欺骗它。缺点是，当它是可编辑的和/或您开发方向敏感的网站时，确实需要考虑这是一种hack，但这在所有浏览器上均有效，并且在只读输入上非常有用。

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