1. 监听键盘事件的基本方法
1.1 事件类型的选择
在前端开发中，选择合适的事件类型是实现稳定键盘交互的第一步。keydown 通常是处理方向键和修饰键的最佳入口，因为它在按下按键时就会触发，能够及时响应用户操作。相比之下，keyup 在松开按键时触发，常用于实现连发输入后的状态回退。keypress 在现代浏览器中逐渐被淘汰，因此应优先使用 keydown 和 keyup。
此外，正确的事件目标也很重要：如果你只想在全局层面捕获按键，可以向 document 注册监听；如果只关心某个输入控件内部的键盘行为，可以对该控件绑定相应事件。键盘事件类型之间的差别决定了你在何时处理键盘输入，以及是否影响默认行为。
1.2 跨浏览器的兼容性要点
为了在不同浏览器和不同键盘布局中稳定识别特殊按键，推荐优先使用 event.code，它表示物理按键，是对键盘布局无关的标识。其次使用 event.key，它表示按下按键的字符或功能名，某些场景下更易于人类解释。对于极端老的浏览器，可以补充对 event.keyCode 的回退处理。箭头键与 Tab 在多数浏览器中都能通过 code 或 key 获得一致的名称，如 ArrowLeft/ArrowRight/ArrowUp/ArrowDown 与 Tab。
// 基本全局监听示例，兼容 keyCode 回退
document.addEventListener('keydown', function(e) {// 优先使用 code，其次 key，再回退到 keyCodeconst code = e.code || '';const key = e.key || '';const keyCode = e.keyCode;// 兼容性提示：如果 code 不可用，则通过 key 或 keyCode 尝试识别// 这里仅演示检测示例，实际应用中请结合下文实现console.log('code:', code, 'key:', key, 'keyCode:', keyCode);
});
2. 识别方向键（Arrow Keys）的具体实现
2.1 使用 code/key 检测方向键
检测方向键的核心在于识别 ArrowUp、ArrowDown、ArrowLeft、ArrowRight。通过 event.code 或 event.key 都能获得稳定的标识，从而避免对不同键盘布局的依赖。为了可预测性，优先使用 code，因为它不受输入法或语言设置影响。
在处理方向键时，通常会附带对默认行为的阻止，如阻止页面滚动以便在自定义控件中使用方向键进行导航。下面的示例展示了如何统一识别并阻止默认滚动：
2.2 阻止默认行为与后续处理
一旦检测到方向键，可以选择是否阻止默认行为，然后将导航逻辑暴露给你的应用组件，如网格导航、菜单焦点切换等。e.preventDefault() 的调用位置决定了键盘交互对浏览器默认行为的影响。
// 方向键检测与滚动阻止示例
document.addEventListener('keydown', function(e) {const code = e.code;if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'ArrowLeft' || code === 'ArrowRight') {// 处理导航逻辑console.log('方向键按下:', code);// 如果你需要自定义焦点导航，请阻止浏览器默认滚动e.preventDefault();}
});
3. 识别 Tab 键及其与修饰键的组合
3.1 Tab 键的默认行为与可访问性
Tab 键在浏览器中默认用于焦点循环，提升可访问性。然而，在某些自定义组件如模态框、自建网格或编辑器中，可能需要对 Tab 的行为进行控制。此时需要检测 Tab 键，并在必要时调用 e.preventDefault() 来实现自定义焦点管理。Shift+Tab 作为反向导航同样需要处理。
设计思路是：在需要时阻止默认焦点切换，但在普通页面中应保留默认导航以保证可访问性。处理时要确保键盘导航的连贯性，避免让用户陷入“不可达”的焦点状态。
3.2 自定义焦点管理的实现示例
以下示例演示在模态框中捕获 Tab 以实现焦点环绕，同时支持 Shift+Tab 的反向导航：
// 模态框中自定义 Tab 焦点环绕
document.addEventListener('keydown', function(e) {if (e.key === 'Tab') {const focusable = Array.from(document.querySelectorAll('.modal [tabindex], .modal a, .modal button, .modal input, .modal select, .modal textarea')).filter(el => !el.hasAttribute('disabled'));const first = focusable[0];const last = focusable[focusable.length - 1];if (focusable.length === 0) {e.preventDefault();return;}// 当前聚焦元素const active = document.activeElement;if (e.shiftKey) {// Shift + Tab：从第一个回到最后一个if (active === first) {e.preventDefault();last.focus();}} else {// Tab：从最后一个跳到第一个if (active === last) {e.preventDefault();first.focus();}}}
});
4. event.code vs event.key 的对比与浏览器兼容性
4.1 关键差异与选用建议
event.code 表示键盘物理键位，与布局无关，适合用于“按下了哪一个物理键”的场景；event.key 表示按下按键的功能或字符，便于直接做文本输入或语言相关的处理。在识别方向键和 Tab 时，两者通常都能给出相同的值，但在涉及跨语言输入法或不同键盘布局时，优先按 code 来提高稳定性。
在国际化应用中，考虑到某些键盘布局可能映射不同的按键到相同的功能，code 的稳定性更高，并且与浏览器实现的规范联系更紧密。对于简单的字符输入场景，可以结合 key 作备选，以兼容不支持 code 的浏览器。
4.2 回退方案与兼容性实现
若要覆盖尽量多的浏览器，你可以同时检测 e.code、e.key，并在不可用时回退到旧的 e.keyCode 或特定数字映射。下面的示例给出一个多层回退的模式：
// 多层回退的检测方案
document.addEventListener('keydown', function(e) {const code = e.code;const key = e.key;const keyCode = e.keyCode;// 使用 code 优先if (code === 'ArrowLeft') { /* 处理左箭头 */ e.preventDefault(); }else if (code === 'ArrowRight') { /* 处理右箭头 */ e.preventDefault(); }// 如果 code 不存在，则尝试 keyelse if (key === 'ArrowLeft') { /* 处理左箭头 */ e.preventDefault(); }else if (key === 'ArrowRight') { /* 处理右箭头 */ e.preventDefault(); }// 最后回退到 keyCode（IE 等老浏览器）else if (typeof keyCode !== 'undefined') {const kc = keyCode;if (kc === 37) { /* 左箭头 */ e.preventDefault(); }else if (kc === 39) { /* 右箭头 */ e.preventDefault(); }}
});
5. 实操示例：在输入框/文本区域中响应方向键和 Tab
5.1 网格导航的实战应用
真实场景中，方向键常用于在网格中实现焦点移动，例如一个 3x3 的控件矩阵。你可以将焦点绑定到每个单元格，按键事件驱动焦点的水平或垂直移动，提升键盘无障碍性与操作效率。下面的示例给出一个简化版的网格导航实现框架。
要点包括：先获取焦点单元格集合，确认当前聚焦的索引，再按 Arrow 键改变索引并聚焦新的单元格，同时对 默认滚动 行为进行控制，确保控件可见性。
5.2 在文本区域中使用 Tab 插入空格或自定义行为
在文本编辑场景中，Tab 默认会聚焦到下一个控件；如果你希望在文本区域中插入空格或实现自定义缩进，可以对 Tab 的行为进行覆盖。以下代码展示了在文本区域内按 Tab 插入四个空格的做法，同时保留 Shift+Tab 的其他行为。
// 文本区域中 Tab 插入空格（保留 Shift+Tab 作为普通焦点切换时的行为）
document.addEventListener('keydown', function(e) {const target = e.target;if (e.key === 'Tab' && target.tagName.toLowerCase() === 'textarea') {e.preventDefault();const start = target.selectionStart;const end = target.selectionEnd;const value = target.value;// 插入四个空格target.value = value.substring(0, start) + ' ' + value.substring(end);// 设置光标在插入后的位置const cursor = start + 4;target.selectionStart = target.selectionEnd = cursor;}
});
