JavaScript 键盘事件详解：精准拦截 AltGr 组合键与特殊字符输入-html教程-PHP中文网

JavaScript 键盘事件详解：精准拦截 AltGr 组合键与特殊字符输入

本文系统讲解 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 Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

✅ 推荐方案：使用 `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 等支持极差。
key vs code 要分清：
- 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 保障光标位置稳定，值得借鉴。