JS监听键盘按键的3种方式！

想知道JS怎么检测键盘按键编码？本文为你揭秘JS监听键盘按键的三种核心方法，助你轻松实现各种键盘交互功能！主要讲解`keydown`、`keyup`事件的用法，以及逐渐被废弃的`keypress`事件。重点介绍如何使用`event.key`和`event.code`替代`keyCode`，实现更准确、更兼容的按键识别。同时，还会教你如何处理组合键，如`Ctrl+C`，以及优化键盘事件监听的性能，包括节流、防抖等技巧。无论你是游戏开发者还是Web应用开发者，都能从中受益，掌握JS键盘事件监听的精髓，让你的应用更加灵动！

JS检测键盘按键编码的方法是通过监听键盘事件并获取event对象中的属性。具体步骤如下：1. 使用keydown事件可获取按下键的物理位置和字符值，适用于游戏操作和快捷键识别；2. 使用keyup事件获取松开键的信息，与keydown类似；3. 使用keypress事件获取字符输入信息，但该事件已被废弃；4. 推荐使用event.key和event.code替代keyCode，key区分大小写且语义清晰，code标识物理按键位置；5. 处理组合键时可通过event.ctrlKey、event.shiftKey等判断修饰键状态；6. 优化性能可通过节流、防抖、限制监听范围及及时移除监听器实现。最终应优先使用现代API以确保兼容性和准确性。

想知道JS怎么检测键盘按键编码？其实就是通过监听键盘事件，拿到event对象，里面就有你想要的按键信息。

解决方案

JS检测键盘按键编码，主要靠监听keydown、keyup和keypress这三个事件。它们各有特点，适用场景也不同。

1. keydown: 按下键盘时触发，可以捕获功能键（如Ctrl、Shift、Alt）和特殊按键（如方向键、Page Up/Down）。它能告诉你用户按下了什么键，但不能准确区分大小写，因为此时字符还没有生成。

   

   document.addEventListener('keydown', function(event) {
       console.log('keydown - Key Code:', event.keyCode, 'Key:', event.key, 'Code:', event.code);
   });

   event.keyCode 已经逐渐被废弃，推荐使用 event.key 和 event.code。event.key 返回按键的字符值，event.code 返回按键的物理位置编码。

2. keyup: 松开键盘时触发，也能捕获功能键和特殊按键。

   document.addEventListener('keyup', function(event) {
       console.log('keyup - Key Code:', event.keyCode, 'Key:', event.key, 'Code:', event.code);
   });

   与keydown类似，keyup也应该使用event.key和event.code。

3. keypress: 按下并释放一个字符键时触发，主要用于文本输入。它能区分大小写，但不能捕获功能键和特殊按键。这个事件也正在被废弃，不推荐使用。

   document.addEventListener('keypress', function(event) {
       console.log('keypress - Char Code:', event.charCode, 'Key:', String.fromCharCode(event.charCode));
   });

   event.charCode 已经废弃，而且 keypress 事件本身也快要退出历史舞台了。

实际应用场景：

• 游戏开发: keydown和keyup 适合处理游戏中的移动、跳跃等操作，因为需要响应快速且需要识别组合键。
• 文本输入: 虽然 keypress 不推荐使用，但如果你需要兼容老版本浏览器，并且只需要处理字符输入，可以考虑。现在更推荐使用 input 事件。
• 快捷键: keydown 可以用来实现快捷键，比如 Ctrl+S 保存。

如何区分大小写和特殊字符？

event.key 属性可以区分大小写。例如，按下大写字母 "A" 时，event.key 的值就是 "A"，而按下小写字母 "a" 时，event.key 的值就是 "a"。

对于特殊字符，event.key 也会返回相应的字符。例如，按下 "!" 时，event.key 的值就是 "!"。

如何处理组合键（如Ctrl+C）？

可以通过检查 event.ctrlKey、event.shiftKey 和 event.altKey 属性来判断是否按下了 Ctrl、Shift 和 Alt 键。

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'c') {
        console.log('Ctrl+C 被按下了！');
        event.preventDefault(); // 阻止默认行为
    }
});

event.preventDefault() 可以阻止浏览器默认行为，比如阻止复制操作。

为什么keyCode逐渐被废弃，推荐使用key和code？

keyCode 主要返回的是一个数字，代表按键的编码。但问题在于，不同的浏览器和操作系统对同一个按键的编码可能不同，导致跨平台兼容性问题。

key 返回的是按键的字符值，更直观易懂，也更容易处理大小写和特殊字符。code 返回的是按键的物理位置编码，即使在不同的键盘布局下，同一个按键的 code 值也是相同的。

总而言之，key 和 code 提供了更好的跨平台兼容性和更清晰的语义。

如何兼容老版本浏览器？

如果需要兼容老版本浏览器，可以同时使用 keyCode 和 key。优先使用 key，如果 key 不可用，再使用 keyCode。

document.addEventListener('keydown', function(event) {
    var key = event.key || String.fromCharCode(event.keyCode);
    console.log('Key:', key);
});

不过，现在大部分浏览器都已经支持 key，所以通常不需要这样做。

如何优化键盘事件监听的性能？

频繁的键盘事件监听可能会影响页面性能。可以考虑以下优化方法：

• 节流 (Throttling): 限制事件处理函数的执行频率。可以使用 setTimeout 或 requestAnimationFrame 来实现节流。
• 防抖 (Debouncing): 在事件停止触发一段时间后才执行事件处理函数。可以使用 setTimeout 来实现防抖。
• 只监听必要的元素: 避免在整个 document 上监听键盘事件，尽量只监听需要响应键盘事件的元素。
• 移除不必要的监听器: 在组件卸载或页面切换时，及时移除不再需要的键盘事件监听器。

这些优化方法可以有效地减少事件处理函数的执行次数，从而提高页面性能。

理论要掌握，实操不能落！以上关于《JS监听键盘按键的3种方式！》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！