本文介绍如何可靠拦截印地语等 Unicode 非 ASCII 字符（如 Devanagari 脚本），解决 onkeypress 在移动端失效问题，推荐使用 input 事件结合正则校验与实时清理策略。
本文介绍如何可靠拦截印地语等 unicode 非 ascii 字符（如 devanagari 脚本），解决 `onkeypress` 在移动端失效问题，推荐使用 `input` 事件结合正则校验与实时清理策略。
在 Web 表单中限制用户仅输入英文字母、空格等安全字符（尤其为后续生成 PDF 等对字体支持有限的场景），是常见需求。但仅依赖 onkeypress 事件（如 onkeypress="return /[a-zA-Z ]/i.test(event.key)"）存在严重兼容性缺陷：该事件已被 MDN 标记为 deprecated，且在 Chrome for Android、Safari iOS 等主流移动浏览器中完全不触发——这正是您遇到“Google Indic 键盘仍可输入 Hindi 字符”的根本原因。
✅ 正确做法：使用 input 事件进行输入后即时校验与清理
input 事件在所有现代浏览器（含移动端）中稳定触发，且能捕获所有输入来源（物理键盘、虚拟键盘、粘贴、语音输入等）：
<input type="text" name="username" id="username" placeholder="User Name*" maxlength="30" required oninput="filterNonLatin(event)" >
function filterNonLatin(event) {
const input = event.target;
// 允许：英文字母（大小写）、空格、常见标点（可按需扩展）
const allowedPattern = /^[a-zA-Z\s]*$/;
// 检查当前值是否合规；若含非法字符，立即清理
if (!allowedPattern.test(input.value)) {
// 移除所有非允许字符（保留光标位置合理性）
input.value = input.value.replace(/[^a-zA-Z\s]/g, '');
}
}⚠️ 注意事项：
- 不要仅依赖前端校验：input 事件可被绕过（如禁用 JS 或直接修改 DOM），务必在服务端再次验证字符集（如正则 /^[a-zA-Z\s]{1,30}$/）。
- 用户体验优化：可添加视觉反馈（如输入框变红、显示提示文本），但避免阻断输入流；oninput 中直接 replace() 是最平滑的清理方式。
- 扩展性建议：若需支持带连字符、下划线或数字（如用户名），请更新正则表达式，例如 /^[a-zA-Z0-9_\-\s]+$/。
- PDF 安全根源：最终 PDF 渲染异常往往因字体缺失所致，建议服务端生成 PDF 时明确指定支持 Latin-1 的字体（如 Helvetica），而非仅依赖前端过滤。
总结：放弃已废弃的 keypress，统一采用 input 事件 + 实时正则清理，是跨平台兼容、健壮可靠的字符过滤方案。
立即学习“前端免费学习笔记（深入）”；
