如何实现程序化更新input值时的内容跟随显示效果？

当手动在输入框中输入内容时，浏览器会自动让输入框跟随内容滚动，始终显示最新输入的字符，但通过代码（比如点击按钮）更新输入框值时，默认不会触发这个滚动行为。要实现和手动输入一样的效果，可以通过以下两种方式：

方法1：定位光标到内容末尾 #

在更新输入框的value后，使用setSelectionRange方法将光标定位到内容的最后位置，浏览器会自动滚动到光标所在处：

const updateInput = () => {
  const input1 = document.getElementById('input1');
  input1.value += (Math.random()*1000).toString();
  // 将光标定位到内容末尾，触发自动滚动
  input1.setSelectionRange(input1.value.length, input1.value.length);
}

方法2：直接设置滚动位置 #

如果不需要光标定位，也可以直接将输入框的scrollLeft设置为其scrollWidth（内容的总宽度），强制滚动到最右侧：

const updateInput = () => {
  const input1 = document.getElementById('input1');
  input1.value += (Math.random()*1000).toString();
  // 强制滚动到内容最右侧
  input1.scrollLeft = input1.scrollWidth;
}

完整示例代码 #

<input id="input1" style="width:50px" />
<button onclick="updateInput()">Update Input</button>

<script>
const updateInput = () => {
  const input1 = document.getElementById('input1');
  input1.value += (Math.random()*1000).toString();
  input1.setSelectionRange(input1.value.length, input1.value.length);
}
</script>

这两种方法都能实现和手动输入时一样的自动滚动效果，可根据需求选择。

内容的提问来源于stack exchange，提问作者Grambam