最可靠方法是用 oninput 实时修正值并配合 onpaste 拦截粘贴，因 oninput 覆盖所有输入途径，需用正则替换非法字符后赋值 back，onpaste 需 preventdefault 并手动清洗插入。
用 oninput 实时过滤特殊字符最可靠
直接拦截键盘事件（如 onkeydown）容易漏掉粘贴、拖入、IME 输入等场景，oninput 在值真正变化后触发，覆盖所有输入途径。关键不是“阻止按键”，而是“修正值”。
实操建议：
- 绑定
oninput事件，用正则替换掉非允许字符，再赋回value - 正则推荐
/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g（允许英文字母、数字、中文、空白），按需调整 - 必须用
event.target.value = ...赋值，不能只改局部变量 - 注意：IE9+ 支持
oninput；IE8 及更早需降级用onpropertychange
<input type="text" oninput="this.value = this.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g, '')">
pattern 属性只能做提交校验，不能实时禁用
pattern 是 HTML5 表单验证机制的一部分，它不干预用户输入过程，只在调用 checkValidity() 或表单提交时触发验证。用户依然可以输入任何字符，只是提交时会报错。
常见误解：
- 以为加了
pattern="[a-zA-Z0-9\u4e00-\u9fa5]*"就能禁止输入——实际无效 - 没配合
title属性时，错误提示不友好（默认显示 “Please match the requested format”） - 移动端软键盘不会因
pattern自动切换类型（比如想限制数字，应优先用type="number"）
仅建议作为辅助校验层，和 oninput 配合使用。
用 inputmode 和 type 降低误输概率
这不是“禁止”，但能从交互源头减少特殊字符出现机会，尤其对移动端有效。
组合策略：
- 纯数字场景：用
type="number"+inputmode="numeric"，多数安卓键盘会弹出数字盘 - 用户名/昵称：用
type="text"+inputmode="text"（默认），避免inputmode="verbatim"这种开放模式 - 避免滥用
type="text"处理本该是数字或邮箱的字段——类型不匹配会导致浏览器绕过部分内置过滤逻辑
inputmode 是提示性属性，不强制约束，但现代浏览器（Chrome 66+、Safari 12.1+）会据此优化软键盘布局。
粘贴时被绕过？必须监听 onpaste 单独处理
即使写了 oninput，用户 Ctrl+V 粘贴含特殊字符的文本仍可能“闪现一下再消失”，体验割裂。根本原因是 onpaste 默认行为发生在 oninput 之前，且原生粘贴会先写入 DOM。
正确做法：
- 同时监听
onpaste，在事件中event.preventDefault() - 手动读取剪贴板内容（
event.clipboardData?.getData('text') || ''） - 清洗后再插入：
document.execCommand('insertText', false, cleanedText)（已废弃但兼容性好），或更现代的event.target.setRangeText()
注意：Safari 对 clipboardData 有权限限制，无焦点或非用户手势触发时可能为空；若需高保真支持，应降级为粘贴后立即用 oninput 二次清洗。
oninput + onpaste，且清洗逻辑复用同一正则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
