如何使用 JavaScript 检测按键？

在开发 Web 应用程序时，我们经常需要获取用户按下的按键。JavaScript 提供了一种检测键盘事件的方法，让我们可以轻松地实现此功能。

监听键盘事件

JavaScript 提供了三个与键盘事件相关的事件：

• keydown - 当用户按下一个键时触发。
• keyup - 当用户释放一个键时触发。
• keypress - 当用户按下一个字符键时触发。

我们可以使用 addEventListener() 方法来监听这些事件。例如，下面的代码将监听用户按下的所有按键：

document.addEventListener('keydown', function(event) {
    console.log('You pressed the ' + event.key + ' key!');
});

在上面的示例中，我们使用 addEventListener() 方法来将 keydown 事件绑定到 document 对象上。当用户按下键盘上任何一个键时，事件处理程序将被执行。event 参数表示事件对象，我们可以使用它来获取有关事件的详细信息，如按下的键的值。

检测特定的按键

如果您只想监听特定的按键，请检查 event.key 属性。下面的代码将仅监听用户按下 Enter 键：

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('You pressed the Enter key!');
    }
});

当用户按下 Enter 键时，事件处理程序将被执行，并输出一条消息到控制台。

获取函数键和组合键

在键盘事件中，函数键和组合键不像普通键那样简单。例如，如果用户按下 Alt + F4 键组合（在 Windows 上），则只有 keydown 事件将被触发，而不会触发其他事件。如果我们想捕捉组合键，就需要检查组合键的总和。

以下代码演示了如何检查用户是否按下 Ctrl + C 组合键：

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'c') {
        console.log('You pressed the Ctrl + C combination!');
    }
});

在上述示例中，我们检查了事件对象的 ctrlKey 属性，用于检测用户是否按下了 Ctrl 键，并检查了 key 属性，用于检测用户是否按下了 C 键。

结论

JavaScript 提供了一种简单的方法来检测用户按下的按键，我们可以借此实现众多实用的功能。了解如何使用键盘事件对开发 Web 应用程序来说是非常重要的，因此建议程序员们掌握这些技能。