Javascript 键盘事件

JavaScript 提供了用于选择、键入和使用特定类型信息的键盘事件。当按下和释放按键时，会根据操作触发事件。我们可以使用 HTML 标签、JavaScript 函数或 addEventListener 事件。它是用于与用户交互表单和其他元素的键盘功能。KeyboardEvent 对象负责键盘事件。

键盘事件的类型

JavaScript 提供了以下类型的事件来使用键盘功能。

• Keydown 事件： 当按下按键时触发 keydown 事件，如果按键持续按下，则会不断重复。
• Keyup 事件： 当按下标点、数字或字母键时，会触发 keyup 事件并开始功能。
• Keypress 事件： 当用户释放按键时，会触发 keyup 事件并开始功能。某些浏览器已不再支持 Keypress 事件。

JavaScript keydown 事件

当按下按键并且按键仍然处于键盘的按下状态时，JavaScript keydown 事件将在应用程序上生效。键盘事件适用于网页的输入值，例如表单、搜索栏和其他元素。

语法

以下 key-down 事件语法显示了键盘按键的位置及其应用。

• 在 HTML 中

• 在 JavaScript 中

• 在 addEventListener 事件中

示例

JavaScript key-down 函数使用 HTML 标签和 JavaScript 函数。

示例 1

keydown 函数执行后，alert 标签会显示用户定义的函数。用户交互元素的 input 标签

输出

alert 框显示 keydown 事件的输出。

示例 2

JavaScript key-down 函数使用 HTML 标签和 JavaScript 函数。我们可以在 key-down 函数执行后更改容器的样式标签。

输出

alert 框显示 keydown 事件的输出。

示例 3

addEventListener 事件用于使用 JavaScript 触发 key down 事件。key-down 事件通过 input 标签作用于单个或多个单选按钮。

输出

alert 框显示 keydown 事件的输出。

JavaScript keyup 事件

当按下按键并按键恢复到键盘的原始位置时，JavaScript key-up 事件将在应用程序上生效。键盘事件适用于网页的输入值，例如表单、搜索栏和其他元素。

语法

以下 keyup 事件语法显示了键盘按键的位置及其应用。

• 在 HTML 中

• 在 JavaScript 中

• 在 addEventListener 事件中

示例

JavaScript keyup 函数使用 HTML 标签和 JavaScript 函数。

示例 1

keyup 函数执行后，alert 消息会显示用户定义的函数。

输出

alert 框显示 keydown 事件的输出。

示例 2

JavaScript keyup 函数使用 HTML 标签和 JavaScript 函数。我们可以在 keyup 函数执行后更改容器的样式标签。

输出

网页显示 keyup 事件的输出。

示例 3

addEventListener 事件用于使用 JavaScript 触发 keyup 事件。keyup 事件通过 input 标签作用于单个或多个复选框。

输出

网页显示 keyup 事件的输出。

JavaScript keypress 事件

当按下按键并按键仍然处于键盘的原始位置时，JavaScript key press 事件将在应用程序上生效。键盘事件适用于网页的输入值，例如表单、搜索栏和其他元素。

语法

以下 keypress 事件语法显示了键盘按键的位置及其应用。

• 在 HTML 中

• 在 JavaScript 中

• 在 addEventListener 事件中

示例

JavaScript keypress 函数使用 HTML 标签和 JavaScript 函数。

示例 1

keypress 函数执行后，alert 消息会显示用户定义的函数。您可以看到 keypress 函数作用于 input 标签，但不作用于 button 标签。如果您在 input 标签中使用 submit 类型，该事件也不起作用。

输出

alert 框显示 keypress 事件的输出。

示例 2

JavaScript keypress 函数使用 HTML 标签和 JavaScript 函数。我们可以在 keypress 函数执行后更改容器的样式标签。文本类型的 input 标签和 textarea 标签适用于 key press 函数。

输出

网页显示 keypress 事件的输出。

示例 3

addEventListener 事件用于使用 JavaScript 触发 keypress 事件。keypress 事件通过 input 标签作用于单个或多个复选框。

输出

网页显示 keypress 事件的输出。

KeyboardEvent 流程图

以下顺序用于在网页上操作 KeyboardEvent 事件

• keydown 事件是键盘功能的第一个事件。如果按下按键生成字符并且按键被长时间按住，则事件会在页面上重复发生。
• keypress 事件是第二个触发的事件，只要按键在 input 标签上被按下，就会重复触发。每次按下 input 标签上的按键都会触发它。
• keyup 事件是最后一个键盘功能。当按键从键盘上释放时，该功能将在页面上生效。

示例

以下示例展示了带有流程图功能的键盘事件。我们可以获取键盘事件及其触发的值。我们可以获取所有函数及其输出值。在这里，我们可以使用 addEventListener 事件或 HTML 函数标签来操作功能。

输出

网页显示 key down、keypress 和 keyup 事件的输出。

键盘事件的常见用途

如今，电脑游戏是键盘事件最流行的应用之一。大多数基于浏览器的游戏都需要某种形式的键盘输入。根据键盘事件的不同，游戏对象会做出不同的响应。此外，本教程还将展示键盘事件在游戏中的实现方式。

示例

以下示例展示了带有流程图功能的键盘事件。我们可以使用 JavaScript 函数在游戏应用程序中获取键盘事件。

输出

网页显示游戏应用程序中 key down、keypress 和 keyup 事件的输出。

不同的按键

键盘事件适用于字母、数字和特殊字符按键事件。我们可以获取其他按键事件，例如 alt、control、arrow、tab、caps lock 等。

示例

该示例显示了从键盘按下哪个键，并显示事件信息。我们可以使用其他键盘事件和 JavaScript 函数来获取事件信息。

输出

keydown 事件显示 alt 键的功能。

结论

当按键被操作以实现用户交互功能时，键盘事件会生效。按键在网页上的 press、up 和 down 事件中起作用。