为何input事件的preventDefault()无法阻止表单元素值变更？

你代码里的input事件是在输入内容已经修改完成后才触发的，这时候调用event.preventDefault()根本没法撤销已经完成的输入操作——就像东西已经放进柜子了，再喊“别放”已经没用了。另外event.data在粘贴、输入法整词输入这类场景下可能为空或者是一串字符，你的判断逻辑也会失效。

方案1：用beforeinput事件（推荐） #

这个事件是在输入动作生效之前触发的，正好适合拦截不允许的输入：

document.addEventListener("beforeinput", event => {
  const forbiddenChars = ['#', '+', '.', ';'];
  // 处理单个输入字符的情况
  if (event.data && forbiddenChars.includes(event.data)) {
    event.preventDefault();
    alert(`Non-allowed character detected: ${event.data}`);
  }
  // 处理粘贴的情况（防止一次性粘贴多个禁用字符）
  else if (event.inputType === 'insertFromPaste') {
    // 获取粘贴的内容
    const pasteData = event.clipboardData.getData('text');
    // 检查是否包含禁用字符
    const hasForbidden = forbiddenChars.some(char => pasteData.includes(char));
    if (hasForbidden) {
      event.preventDefault();
      alert("Pasted content contains non-allowed characters");
    }
  }
});

方案2：用keydown事件（兼容旧浏览器） #

如果需要兼容不支持beforeinput的旧浏览器，可以用keydown，但要注意处理特殊键（比如Ctrl/V粘贴、输入法）：

document.addEventListener("keydown", event => {
  const forbiddenChars = ['#', '+', '.', ';'];
  // 排除Ctrl/C/V等功能键操作
  if (event.ctrlKey || event.metaKey) return;
  
  const pressedChar = String.fromCharCode(event.keyCode);
  if (forbiddenChars.includes(pressedChar)) {
    event.preventDefault();
    alert(`Non-allowed character detected: ${pressedChar}`);
  }
});
// 额外处理粘贴
document.addEventListener("paste", event => {
  const forbiddenChars = ['#', '+', '.', ';'];
  const pasteData = event.clipboardData.getData('text');
  if (forbiddenChars.some(char => pasteData.includes(char))) {
    event.preventDefault();
    alert("Pasted content contains non-allowed characters");
  }
});

补充说明 #

• 别再用stopPropagation()或stopImmediatePropagation()了，你的问题和事件传播完全没关系，这些方法只会阻止事件传给父元素，对拦截输入没用。
• 如果是针对特定输入框（不是整个document），把事件绑定到对应的input/textarea元素上更精准，避免全局拦截影响其他输入控件。

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