如何判断输入操作位置，实现输入框超长内容的精准截断逻辑？

要解决输入框在开头添加字符时的异常问题，核心是先记录输入前的状态，再根据输入位置（开头/末尾）执行对应的截断逻辑，最终保证输入框长度始终为2，同时保留用户输入的字符和一个原有字符。

原代码的问题 #

原代码在input事件中直接用当前的selectionStart和value.length判断输入位置，这逻辑存在偏差：输入后内容长度已经更新，光标位置的判断无法反映真实的输入操作位置，导致开头输入时截断结果不符合预期。

修正后的实现方案 #

我们需要用beforeinput事件缓存输入前的内容和光标位置，再在input事件中根据缓存的状态判断输入位置，执行正确的截断逻辑，同时恢复光标位置保证用户体验。

完整代码

<input my-input type="text" value="" />

const myInput = document.querySelector("[my-input]");
const maxLength = 2;
// 缓存输入前的内容和光标位置
let prevInputValue = "";
let prevCursorPos = 0;

// 监听beforeinput，记录输入前的状态
myInput.addEventListener("beforeinput", () => {
  prevInputValue = myInput.value;
  prevCursorPos = myInput.selectionStart;
});

myInput.addEventListener("input", () => {
  const currentValue = myInput.value;
  // 未超过限制时直接返回
  if (currentValue.length <= maxLength) return;

  let newValue;
  // 判断输入位置：开头输入（光标在原有内容的最左侧）
  const isStartInput = prevCursorPos <= 0;
  // 判断输入位置：末尾输入（光标在原有内容的最右侧）
  const isEndInput = prevCursorPos >= prevInputValue.length;

  if (isStartInput) {
    // 开头输入：保留新输入的字符，截断原内容的第一个字符（即输入位置的下一个字符）
    // 例：原内容"AB"，输入"C"后变成"CAB"，处理后为"CB"
    newValue = currentValue.slice(0, 1) + currentValue.slice(2);
    // 光标移到新输入字符的后面
    myInput.selectionStart = myInput.selectionEnd = 1;
  } else if (isEndInput) {
    // 末尾输入：截断第一个字符，保留后面的内容
    // 例：原内容"AB"，输入"C"后变成"ABC"，处理后为"BC"
    newValue = currentValue.slice(1);
    // 光标移到末尾
    myInput.selectionStart = myInput.selectionEnd = newValue.length;
  } else {
    // 中间输入的情况（可选处理）：截断超出部分的末尾字符，保持长度限制
    const excessLength = currentValue.length - maxLength;
    newValue = currentValue.slice(0, prevCursorPos + 1) + currentValue.slice(prevCursorPos + 1 + excessLength);
    myInput.selectionStart = myInput.selectionEnd = prevCursorPos + 1;
  }

  myInput.value = newValue;
});

关键逻辑说明 #

1. 状态缓存：通过beforeinput事件记录输入前的内容和光标位置，这是准确判断输入位置的核心前提。
2. 位置判断：根据输入前的光标位置，区分开头、末尾、中间三种输入场景。
3. 截断规则：
   • 开头输入：保留新输入的第一个字符，删除原内容的第一个字符，确保最终长度为2。
   • 末尾输入：删除原内容的第一个字符，保留新输入的字符和原内容的最后一个字符。
   • 中间输入：可选处理，删除超出长度限制的末尾字符，保持光标在输入位置。
4. 光标恢复：处理后恢复光标位置，避免光标跳变影响用户输入体验。

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