javascript - "Scroll"长文本输入的最右边

Question

我有一个图像选择器，允许从图库中选择图像，然后将 URL 填入 <input type="text"> field 。 URL 可能非常长，总是在文本字段中看到 URL 的前半部分没有什么信息值(value)。

有人知道一种方法可以“滚动”到文本字段的最右侧，以便 URL 的结尾而不是开头可见吗？无需借助文本区域。

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

所有浏览器

如果你想支持每一个浏览器，考虑用你设置为 rtl(从右到左)的 dir (方向)属性来欺骗它).缺点是它是一个 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">