本文系统讲解 keydown/keyup/keypress 三大键盘事件的核心差异、现代推荐用法及实际拦截技巧，重点解决 AltGr（如 ē、r̥、ṭ 等 Unicode 组合字符）无法通过 keyCode/code 判断直接阻止的问题，并提供纯 JS 与 Angular 指令双方案。
本文系统讲解 `keydown`/`keyup`/`keypress` 三大键盘事件的核心差异、现代推荐用法及实际拦截技巧，重点解决 altgr（如 ē、r̥、ṭ 等 unicode 组合字符）无法通过 keycode/code 判断直接阻止的问题，并提供纯 js 与 angular 指令双方案。
在 Web 开发中，仅依赖 keydown 或 keyup 事件监听并调用 event.preventDefault() 来拦截 AltGr（右 Alt）组合键输入，往往失效——原因在于：AltGr 本身不产生可打印字符，其触发的重音字符（如 ē、ṭ）是操作系统或输入法在按键释放后合成的 Unicode 字符，属于 input 事件阶段的行为，而非 keydown 的原始按键行为。
例如，以下代码无法真正阻止：
textarea.addEventListener('keydown', (e) => {
if (e.code === 'AltRight' || e.key === 'AltGraph') {
e.preventDefault(); // ❌ 无效：AltGr 按下时未输入字符，且浏览器可能忽略该阻止
}
});同理，检查 e.keyCode === 17 || e.keyCode === 18（Ctrl/Alt 键码）也无效，因 keyCode 已被废弃，且 AltGr 在多数环境下不映射为标准修饰键码。
✅ 正确思路：不在 keydown 阶段“预测”组合结果，而是在字符真正写入前（即 input 事件），对最终文本内容进行实时清洗。
立即学习“Java免费学习笔记（深入）”；
✅ 推荐方案：使用 input 事件 + ASCII 白名单正则过滤
input 事件在用户输入、粘贴、撤销等任何导致 <textarea></textarea> 值变更的操作后立即触发，且包含完整的当前值，是拦截非法字符最可靠、最通用的时机。
<textarea id="cleanInput" placeholder="只允许 ASCII 字符（a-z, 0-9, 标点等）"></textarea>
const textarea = document.getElementById('cleanInput');
// ✅ 纯 JavaScript 实现（兼容所有框架）
textarea.addEventListener('input', function (e) {
// 保留 ASCII 可见字符（U+0020–U+007E）及制表符、换行符、回车符
const asciiOnlyRegex = /[ -~u0009u000Au000D]*/g;
const cleaned = (e.target.value.match(asciiOnlyRegex) || []).join('');
if (cleaned !== e.target.value) {
e.target.value = cleaned;
// 可选：恢复光标位置（避免跳转）
e.target.setSelectionRange(cleaned.length, cleaned.length);
}
});? 正则说明：
[ -~]匹配空格到~的标准 ASCII 可见字符；u0009（Tab）、u000A（LF）、u000D（CR）确保基础编辑功能不受影响。
⚠️ 注意事项与进阶优化
-
不要依赖
keypress：该事件已被现代浏览器弃用（MDN 明确标注），且对 AltGr、IME 输入、emoji 等支持极差。 -
keyvscode要分清：-
event.key表示语义键值（如'é','Enter','AltGraph'），适合判断实际输入； -
event.code表示物理按键位置（如'KeyE','Enter','AltRight'），与布局无关，适合快捷键绑定。 AltGr 在部分系统中会触发key: 'AltGraph'，但不保证所有浏览器/OS 一致，故不可作为唯一拦截依据。
-
-
处理粘贴场景：上述
input方案天然支持粘贴拦截（因为粘贴也会触发input）。若需更精细控制（如保留光标位置、区分粘贴源），可结合beforeinput（实验性，兼容性有限）或监听paste事件 +preventDefault()+ 手动插入清洗后文本。 -
Angular 用户注意：问题答案中提供的
PermitDirective是优秀实践——它将清洗逻辑封装为可复用指令，并通过@HostListener('input')和@HostListener('paste')全面覆盖输入路径，同时利用getSelectionRange保障光标位置稳定，值得借鉴。
✅ 总结：三步构建健壮字符过滤
-
放弃
keydown/keyup拦截 AltGr 组合键：它们无法可靠捕获合成字符； -
绑定
input事件：在值变更后第一时间获取完整字符串； -
用正则白名单清洗：
/[\x20-\x7E\u0009\u000A\u000D]*/g安全、高效、跨平台。
此方案不依赖浏览器按键码实现细节，不干涉用户操作流，兼容 IME、屏幕阅读器及各类输入设备，是生产环境处理特殊字符输入的首选策略。
