如何让input文本框优先展示输入内容的尾部而非开头部分

核心实现思路 #

通过手动控制input元素的横向滚动偏移量，让内容直接滚动到最右侧，即可优先展示文本末尾的内容，无需对原文本做截断处理。

基础代码示例 #

HTML部分 #

<!-- size属性设置可见长度为14字符，符合你的需求 -->
<input type="text" id="targetInput" value="Starting portion, Ending Portion" size="14">

JS逻辑 #

const inputEl = document.getElementById('targetInput');
// 赋值完成后执行以下代码即可实现展示末尾内容
inputEl.scrollLeft = inputEl.scrollWidth;

效果验证：执行后输入框可见区域会直接显示最后14个字符 Ending Portion，完全符合你的需求。

扩展场景适配 #

• 如果需要默认光标停在文本末尾，可替换成以下逻辑：

inputEl.focus();
inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);

• 如果需要实时输入过程中始终展示尾部内容，添加事件监听即可：

inputEl.addEventListener('input', () => {
  inputEl.scrollLeft = inputEl.scrollWidth;
});

兼容性说明 #

上述方案兼容所有主流现代浏览器，IE11也可正常运行。

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