输入框input事件监听异常：值修正后出现非预期拼接问题

问题场景 #

当对输入框设置值不超过50的限制时，触发input监听器修改值为50后，后续输入的字符会和50拼接，出现如503这类不符合预期的值。

示例代码 #

const inputElement = document.getElementById('myInput');
console.log('The output I get is:')
inputElement.addEventListener('input', function(event) {
  let value = Number(event.target.value)
  console.log("value：" + value)
  if (value > 50) {
    event.target.value = 50
    console.log("It cannot be greater than 50");
  }
});

<input type="text" id="myInput" placeholder="Type something...">

输入步骤与实际输出 #

输入顺序：输入1→2→3
实际输出：

The output I get is:
value：1
value：1
value：12
value：12
value：123
It cannot be greater than 50
value：503
It cannot be greater than 50

问题原因 #

在input事件中直接修改输入框value后，浏览器的输入缓冲区并未被清空，用户后续输入的字符会被追加到缓冲区，与设置的50拼接，导致异常值出现。同时input事件会在用户每一次输入操作（包括按键、粘贴）时触发，直接修改value会干扰浏览器的正常输入流程。

解决方案 #

方案一：拦截按键+预判输入结果 #

通过keydown事件拦截输入，预判输入后的结果是否超过限制，若超过则阻止输入；同时处理粘贴场景，避免非法内容被粘贴。

const inputElement = document.getElementById('myInput');
console.log('The output I get is:')

// 处理按键输入
inputElement.addEventListener('keydown', function(event) {
  // 允许删除、方向键等控制类按键
  const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Escape'];
  if (allowedControlKeys.includes(event.key)) return;

  // 预判输入后的数值
  const currentValue = event.target.value;
  const newValue = currentValue + event.key;
  const numValue = Number(newValue);

  // 限制数值不超过50，且仅允许数字输入
  if (numValue > 50 || isNaN(numValue)) {
    event.preventDefault();
    console.log("输入值不能大于50或为非数字");
  }
});

// 处理粘贴操作
inputElement.addEventListener('paste', function(event) {
  const pastedContent = event.clipboardData.getData('text');
  const numValue = Number(pastedContent);
  if (numValue > 50 || isNaN(numValue)) {
    event.preventDefault();
    console.log("粘贴内容不能大于50或为非数字");
  } else {
    event.target.value = numValue;
  }
});

方案二：修正值后同步光标位置 #

在input事件中修正值后，手动设置光标位置到输入框末尾，避免后续输入字符与限制值拼接。

const inputElement = document.getElementById('myInput');
console.log('The output I get is:')

inputElement.addEventListener('input', function(event) {
  let value = Number(event.target.value);
  console.log("value：" + value);
  
  if (value > 50) {
    event.target.value = 50;
    // 将光标定位到输入框末尾，防止后续输入拼接
    event.target.setSelectionRange(2, 2);
    console.log("It cannot be greater than 50");
  } else if (isNaN(value)) {
    // 清空非数字输入
    event.target.value = '';
  }
});

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