oninput+正则替换是最稳的实时过滤方式，可覆盖键盘输入、粘贴、拖入、ime上屏等所有场景，比onkeyup/onkeypress更可靠；需用this.value=this.value.replace()赋值，正则须按业务明确定义允许字符范围。
oninput + 正则替换是最稳的实时过滤方式
直接在 oninput 里用 replace() 清洗输入值，能覆盖键盘输入、粘贴、拖入、IME 上屏等所有场景。比 onkeyup 或 onkeypress 更可靠，因为后者对粘贴和中文输入法上屏无响应。
常见写法：<input oninput="this.value = this.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')">
- 匹配范围：字母、数字、汉字（
\u4e00-\u9fa5覆盖常用中文 Unicode 区段） - 不匹配空格、换行、制表符、标点、emoji、控制字符等一切非目标字符
- 注意：该正则会把全角数字/字母也过滤掉，如需保留，请额外加入
０-９和Ａ-Ｚａ-ｚ
pattern 属性只做提交前校验，不能阻止输入
pattern 是 HTML5 原生验证机制，仅在表单提交或调用 checkValidity() 时触发，用户仍可自由输入特殊符号，只是提交时会报错并聚焦到该字段。
示例：<input pattern="[a-zA-Z0-9\u4e00-\u9fa5]+" title="请勿输入特殊字符">
- 必须配合
required才能生效（否则空值也通过） - 不兼容 IE10 及更早版本
- 无法阻止用户看到特殊符号被输入进去——纯“事后提醒”，不是“事前拦截”
禁止粘贴特殊字符要单独处理 onpaste
仅靠 oninput 无法拦截粘贴行为中带入的非法字符，因为 onpaste 默认发生在 oninput 之前，且事件对象里拿不到原始文本内容，必须用 event.preventDefault() + 手动读取剪贴板。
实操建议：
- 监听
onpaste，调用event.preventDefault() - 用
event.clipboardData.getData('text')获取粘贴文本 - 清洗后，用
document.execCommand('insertText', false, cleaned)（已废弃但仍广泛支持）或input.setRangeText()插入 - 注意：Safari 对
clipboardData有权限限制，需用户交互后才可读取
服务端永远要二次校验，前端过滤只是体验优化
所有前端限制都可被绕过：禁用 JS、修改 DOM、抓包重放、curl 直传……所以真正关键的是后端。
- 接收字段后，必须用服务端语言（如 Python 的
re.sub(r'[^a-zA-Z0-9\u4e00-\u9fa5]', '', s)）再清洗一遍 - 若字段用于 SQL 查询，必须使用参数化查询，不能拼接字符串
- 若用于文件名、路径、命令执行等高危上下文，应白名单严格限定字符集，而非黑名单过滤
最容易被忽略的一点：中文输入法在“正在组词”阶段（比如打“shu”还没选字），oninput 拿到的是未上屏的拼音，此时正则不会误删；但一旦按空格或回车完成上屏，后续输入就进入真实字符流——这个过渡期无需干预，现代浏览器已处理得比较稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
