我有一个图像选择器，它允许从图库中选择一个图像，然后将 URL 填充到一个<input type="text">字段中。URL 可能非常长，并且总是在文本字段中看到 URL 的前半部分几乎没有信息value。
有人知道一种“滚动”到文本字段最右侧的方法，以便可以看到 URL 的结尾而不是开头？无需求助于 textarea。
“滚动”到长文本输入的最右侧
IT技术
javascript
html
css
2021-03-01 17:39:04
5个回答
除 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) 属性来欺骗它。缺点是它是一个 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"> Lucman Abdulrachman的答案是最好的，但我无法投票，所以我添加了另一个不使用 jQuery 的解决方案：
var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;
$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;
您可以简单地将 CSS 属性方向设置为“rtl”（从右到左），不需要 JS。这将改变滚动方向以及文本对齐方式，因此当文本比输入的大小短时它可能看起来很奇怪，但鉴于输入将始终包含一个长 url，这应该不是问题。
input {
margin: 10px;
direction: rtl;
}<input type="text" value="short url" size="20">
<br>
<input type="text" value="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" size="20">我希望这有帮助。
更好的解决方案是使输入足够大以查看最合理长度的 url。输入的默认宽度通常很短。通过减小字体大小和增加宽度（可能按百分比填充可用空间），您可能可以使 url 与浏览器的 url 栏一样长或长，可见。您实际上并不需要非常大的 url 文本，因为您可能只是在验证它看起来是否合理，而不是阅读它。
如果能够以相对较大的字体查看整个 url 很重要（如果用户预计是高级用户并且可能会手动编辑 url），您应该考虑使用文本区域。url 随机换行看起来有点奇怪，但只要你不插入空格，url 应该仍然有效。
如果您的 Web 服务器负责生成 url，您可以尝试使其不那么冗长。如果您可以使用相对 url（跳过域部分），您还可以节省空间。