preventDefault 在 input 事件中无效，因字符已插入；应使用 beforeinput 拦截，它在插入前触发且可阻止，不支持时需降级为 input + 光标修复。
为什么 preventDefault 在 input 事件里拦不住非法字符
直接在 input 事件中调用 event.preventDefault() 是无效的——浏览器已经完成字符插入，DOM 已更新，此时阻止已无意义。真正能拦截输入的时机是 beforeinput 或更早的 keydown，但后者只能捕获按键，无法准确判断最终插入内容（比如 Ctrl+V 粘贴、IME 输入、长按候选词等）。
beforeinput 是目前最可靠的拦截入口
现代浏览器（Chrome 62+、Edge 79+、Firefox 102+）支持 beforeinput，它在字符/文本实际插入前触发，且 event.data 包含即将插入的原始内容，event.inputType 告知操作类型（如 "insertText"、"deleteContentBackward"）。关键点：
-
beforeinput可被preventDefault()阻止，且阻止后 DOM 不变、光标位置不受干扰 - 对粘贴操作（
inputType === "insertFromPaste"），需配合event.clipboardData?.getData("text/plain")提前校验 - IME 输入（如中文拼音）会触发多次
beforeinput，event.data可能为空或为中间态，应只对event.data非空且inputType === "insertText"做过滤 - 不支持
beforeinput的旧浏览器（如 Safari ≤ 15.4）需降级到input+ 回滚逻辑，但体验较差
如何写一个可复用的非法字符过滤器
核心逻辑：定义允许字符集（如仅数字、字母、下划线），在 beforeinput 中检查 event.data 是否全匹配。示例：
const allowedChars = /^[\w\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]*$/; // 中文、英文、数字、下划线、常见标点
element.addEventListener('beforeinput', (e) => {
if (e.inputType === 'insertText' && e.data && !allowedChars.test(e.data)) {
e.preventDefault();
return;
}
if (e.inputType === 'insertFromPaste') {
const text = e.clipboardData?.getData('text/plain') || '';
if (!allowedChars.test(text)) {
e.preventDefault();
return;
}
}
});
注意：
立即学习“前端免费学习笔记（深入）”；
- 正则中的
\u4e00-\u9fa5覆盖常用汉字，但生僻字或 emoji 需额外扩展；\u3000-\u303f是中文标点，\uff00-\uffef是全角 ASCII - 不要在
beforeinput中修改element.value—— 这会导致光标跳变或重复触发 - 如果编辑器是富文本（如
contenteditable），需监听目标元素而非 document，且要考虑选区上下文
容易被忽略的兼容性与边界问题
Safari 对 beforeinput 支持不完整：iOS Safari 和 macOS Safari ≤ 15.4 完全不触发该事件；Safari 16+ 才开始支持，但仍可能漏掉部分粘贴或 IME 场景。实际项目中必须 fallback：
- 对不支持
beforeinput的环境，监听input，用正则清洗element.value，再手动重置值 + 保存/恢复光标位置（用getSelection()和setSelectionRange()） - 移动端软键盘触发的“自动更正”或“预测文本”可能绕过所有前端拦截，属于系统级行为，无法阻止
- 用户长按输入框选择“粘贴”时，某些 Android 浏览器会跳过
beforeinput直接触发input，需双重校验
真正的难点不在拦截动作本身，而在保持光标稳定、兼容各种输入法、不破坏无障碍访问（如屏幕阅读器依赖原生事件流）。别指望一行 preventDefault 就能搞定。
