摘要：在本教程中，您将学习如何使用 JavaScript 键盘事件，包括 keydown、keypress 和 keyup。
JavaScript 键盘事件简介当您与键盘交互时，会触发键盘 事件。主要有三种键盘事件：
keydown – 当您按下键盘上的键时触发，并在您按住键时重复触发。keyup – 当您释放键盘上的键时触发。keypress – 当您按下字符键盘（如 a、b 或 c）时触发，但不包括左箭头键、Home 键或 End 键等。keypress 事件在您按住键盘上的键时也会重复触发。键盘事件通常在文本框上触发，但所有元素都支持它们。
当您在键盘上按下字符键一次时，会按以下顺序触发三个键盘事件：
keydownkeypresskeyupkeydown 和 keypress 事件在文本框发生任何更改之前触发，而 keyup 事件在文本框发生更改后触发。如果您按住字符键，keydown 和 keypress 会重复触发，直到您释放该键。
当您按下非字符键时，keydown 事件会首先触发，然后是 keyup 事件。如果您按住非字符键，keydown 会重复触发，直到您释放该键。
处理键盘事件要处理键盘事件，请执行以下步骤：
首先，选择将触发键盘事件的元素。通常，它是一个文本框。然后，使用 element.addEventListener() 注册事件处理程序。假设您有以下 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。
请参见以下示例：
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 表示键盘上的物理键。本教程是否有帮助？ 是 否 发送 取消