“滚动”到长文本输入的右边 [英] "Scroll" to the very right of a long text input
问题描述
我有一个图片选择器,可以从图库中选择图片,然后将网址填入< input type =text>
字段。 URL可能非常长,并且总是看到文本字段中的URL的上半部分具有非常少的信息值。
有人知道一种方式滚动到文本字段的最右侧,以便URL的结尾可见,而不是开始?
除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
(direction)属性来欺骗它,你设置为 rtl
(从右到左)。缺点是,它是一个黑客,当它是可编辑的和/或你开发一个方向敏感的网站,但是这适用于所有浏览器,是非常好的只读输入真正需要考虑。
var foo = document.getElementById(foo); foo.value =http://stackoverflow.com / questions / 1962168 / scroll-to-the-very-right-of-a-long-text-input;
< input id =foodir =rtl>
I have an image selector that allows to choose an image from a gallery, then fills in the URL into a <input type="text">
field. The URLs can be awfully long, and always seeing the first half of the URL in the text field has very little informational value.
Does somebody know a way to "scroll" to the very right of the text field so that the end of the URL is visible instead of the beginning? Without resorting to a textarea.
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">
这篇关于“滚动”到长文本输入的右边的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!