本文介绍如何在 Web 表单中可靠地阻止印地语等 Unicode 非拉丁字符输入，解决 onkeypress 在移动端失效问题，推荐使用 oninput + 正则校验的跨平台兼容方案。
本文介绍如何在 web 表单中可靠地阻止印地语等 unicode 非拉丁字符输入，解决 `onkeypress` 在移动端失效问题，推荐使用 `oninput` + 正则校验的跨平台兼容方案。
在构建多端兼容的表单时，仅依赖 onkeypress 事件过滤字符存在明显缺陷：该事件已被 MDN 标记为已弃用，且在 Chrome for Android、Safari iOS 等主流移动浏览器中无法触发（尤其使用 Google Indic Keyboard 等输入法时），导致 Hindi（देवनागरी）、Tamil、Bengali 等 Unicode 字符仍可被粘贴或直接输入，最终破坏 PDF 渲染效果。
✅ 推荐解决方案：使用 oninput 事件 + 实时正则清理
oninput 在所有现代浏览器（含移动端）中均被完整支持，且能捕获键盘输入、粘贴、拖放、语音输入等所有文本变更场景：
<input type="text" name="username" id="username" placeholder="User Name*" maxlength="30" oninput="this.value = this.value.replace(/[^a-zA-Z ]/g, '')" required>
? 关键说明：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- /[^a-zA-Z ]/g 表示“匹配所有非英文字母和空格的字符”，并全局替换为空字符串；
- oninput 在每次值变化后立即执行，确保非法字符被即时清除（用户几乎无感知）；
- 不影响 maxlength 和 required 等原生属性，兼容性与语义完整性兼备。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 onkeyup 替代 onkeypress —— 虽然它在移动端可用，但存在时序问题：用户松开按键后才触发，可能导致短暂显示非法字符或光标错位；
- 若需支持带重音的拉丁字符（如 é, ñ, ü），可扩展正则为 /[^a-zA-Z\u00C0-\u017F ]/g；
- 如需更严格的控制（如禁止连续空格、首尾空格），建议结合 trim() 和自定义验证逻辑；
- 服务端必须再次校验 —— 前端过滤仅为用户体验优化，不可替代后端输入净化。
? 总结：面对多语言输入法挑战，应放弃已弃用的 keypress，转向语义明确、全平台可靠的 oninput 方案，并始终遵循“前端防误、后端守门”的安全原则。
