input失去焦点时如何不使用CSS direction显示文本末尾而非开头

无需使用CSS direction 属性即可实现输入框超出宽度时，失焦/点击外部区域隐藏开头文本、展示末尾文本的效果，以下是两种可直接落地的实现方案：

方案1：Selection API 实现（无侵入、性能最优） #

利用input原生的setSelectionRange方法，将光标定位到文本末尾，输入框会自动滚动到对应位置展示末尾内容，不需要修改原文本值。

代码示例 #

<input id="customInput" value="abcdefghijklmnopqrstwxyz123456789">

const input = document.getElementById('customInput');

// 监听失焦事件
input.addEventListener('blur', () => {
  const valueLength = input.value.length;
  // 将光标定位到文本最后一位，输入框自动滚动到末尾
  input.setSelectionRange(valueLength, valueLength);
});

// 监听全局点击事件，点击输入框外区域时触发相同逻辑
document.addEventListener('click', (e) => {
  if (e.target !== input) {
    const valueLength = input.value.length;
    input.setSelectionRange(valueLength, valueLength);
  }
});

方案优势 #

• 不修改input原始value，不影响表单提交逻辑
• 代码量极小，性能无额外开销
• 兼容性好，支持所有主流浏览器及IE9以上版本

方案2：动态截断文本（展示效果完全可控） #

如果需要完全避免光标展示的影响，可以选择失焦时截断文本只保留末尾指定长度内容，聚焦时恢复完整文本的方案。

代码示例 #

const input = document.getElementById('customInput');
// 存储输入框完整原始值
let fullValue = input.value;
// 可根据输入框实际宽度调整展示的字符数
const MAX_SHOW_LENGTH = 20;

// 失焦时截断展示末尾内容
input.addEventListener('blur', () => {
  fullValue = input.value;
  if (fullValue.length > MAX_SHOW_LENGTH) {
    input.value = fullValue.slice(-MAX_SHOW_LENGTH);
  }
});

// 聚焦时恢复完整内容
input.addEventListener('focus', () => {
  input.value = fullValue;
  // 光标定位到末尾，符合用户输入习惯
  input.setSelectionRange(fullValue.length, fullValue.length);
});

注意事项 #

使用该方案时，表单提交需要取存储的fullValue作为提交值，不要直接读取input的value，避免提交被截断的内容

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