"滚动"到长文本输入的右侧

Question

我有一个图像选择器,允许从图库中选择一个图像,然后将URL填入一个<input type="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(从右到左)的(direction)属性来欺骗它.缺点是它是一个黑客,当它可编辑和/或你开发一个方向敏感的网站时真的需要考虑,但这适用于所有浏览器,并且非常适合只读输入.

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

Answer 2

Lucman Abdulrachman的答案是最好的,但我不能赞成它,所以我在不使用jQuery的情况下添加另一个解决方案:

var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;

Answer 3

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;