JavaScript 键盘事件详解 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript 键盘事件，包括 keydown、keypress 和 keyup。

JavaScript 键盘事件简介

当您与键盘交互时，会触发键盘事件。主要有三种键盘事件：

keydown – 当您按下键盘上的键时触发，并在您按住键时重复触发。
keyup – 当您释放键盘上的键时触发。
keypress – 当您按下字符键盘（如 a、b 或 c）时触发，但不包括左箭头键、Home 键或 End 键等。keypress 事件在您按住键盘上的键时也会重复触发。

键盘事件通常在文本框上触发，但所有元素都支持它们。

当您在键盘上按下字符键一次时，会按以下顺序触发三个键盘事件：

keydown
keypress
keyup

keydown 和 keypress 事件在文本框发生任何更改之前触发，而 keyup 事件在文本框发生更改后触发。如果您按住字符键，keydown 和 keypress 会重复触发，直到您释放该键。

当您按下非字符键时，keydown 事件会首先触发，然后是 keyup 事件。如果您按住非字符键，keydown 会重复触发，直到您释放该键。

处理键盘事件

要处理键盘事件，请执行以下步骤：

首先，选择将触发键盘事件的元素。通常，它是一个文本框。
然后，使用 element.addEventListener() 注册事件处理程序。

假设您有以下 id 为 message 的文本框：

<input type="text" id="message">Code language: HTML, XML (xml)

以下示例演示了如何注册键盘事件监听器：

let msg = document.getElementById('#message');

msg.addEventListener("keydown", (event) => {
    // handle keydown
});

msg.addEventListener("keypress", (event) => {
    // handle keypress
});

msg.addEventListener("keyup", (event) => {
    // handle keyup
});Code language: JavaScript (javascript)

如果您按下字符键，所有三个事件处理程序都将被调用。

键盘事件属性

键盘事件有两个重要的属性：key 和 code。key 属性返回已按下的字符，而 code 属性返回物理键码。

例如，如果您按下 z 字符键，event.key 将返回 z，而 event.code 将返回 KeyZ。

请参见以下示例：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Keyboard Events: Key/Code</title>
</head>
<body>
    <input type="text" id="message">

    <script>
        let textBox = document.getElementById('message');
        textBox.addEventListener('keydown', (event) => {
            console.log(`key=${event.key},code=${event.code}`);

        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

如果您键入字符 z，您将看到以下消息：

key=z,code=KeyZ

工作原理

首先，使用 getElementById() 方法选择 id 为 message 的文本框。
然后，注册 keydown 事件监听器，并记录已按下的键的键和代码。

摘要

当您在键盘上按下字符键时，keydown、keypress 和 keyup 事件将按顺序触发。但是，如果您按下非字符键，则只会触发 keydown 和 keyup 事件。
键盘 event 对象有两个重要的属性：key 和 code 属性，它们允许您检测已按下了哪个键。
key 属性返回按下的 key 的值，而 code 表示键盘上的物理键。

本教程是否有帮助？