JavaScript：捕获键盘事件并做出反应

wufei123 2024-06-02 阅读:75 评论:0

在本文中，我们将讨论如何在 JavaScript 中捕获并响应不同的键盘事件。我将向您展示几个现实世界的示例，以使其易于理解。 JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。...

javascript：捕获键盘事件并做出反应

在本文中，我们将讨论如何在 JavaScript 中捕获并响应不同的键盘事件。我将向您展示几个现实世界的示例，以使其易于理解。

JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论不同的提示和技巧，它们将帮助您进行日常 JavaScript 开发。

作为一名 JavaScript 开发人员，有时您需要实现一些功能，要求您处理键盘事件并根据它们执行操作。幸运的是，JavaScript 提供了一个内置的 KeyboardEvent 对象，它允许您处理不同类型的键盘事件。

JavaScript 中的键盘事件

在 JavaScript 中，KeyboardEvent 对象提供了三个事件：按键按下、按键按下和按键弹起。

当您按下键盘上的任意键时，一系列事件将按以下顺序发生。

按下键
按键
按键

当按下键盘上的任意键时，会触发按键事件。并且如果长时间按下某个键，则会重复触发按键按下事件。

按键事件主要在按下任何可打印字符时触发，并在按键事件后触发。事实上，按键事件用于中继按键事件产生的字符。大多数情况下，非字符键不会引发按键事件。尽管某些浏览器支持此事件，但不建议依赖此事件，因为它将从网络标准中删除。

按键事件已被弃用，并将在现代浏览器中逐步淘汰。

最后，释放按键时会引发按键事件。基本上，按键按下和按键按下事件的组合为您提供了一个代码，该代码指示按下的键。

每个键盘事件都提供两个重要的属性：key 和 code。 key 属性用按下的字符填充，而 code 属性用字符的物理键位置填充。例如，如果按 a 字符键，则 key 属性将填充为 a，并且 code 属性将填充为 KeyA 常量。但是，按下的键码不一定与字符相同！如果用户设置了备用键盘布局，例如 Dvorak，则按相同的键代码将产生不同的字符。

以上是 JavaScript 中键盘事件的简要概述。从下一节开始，我们将讨论这些事件以及现实世界的示例，以了解它们是如何工作的。

keydown 事件

在本节中，我们将了解 keydown 事件如何在 JavaScript 中工作。当按下键盘上的任意键时，会触发 keydown 事件。

让我们快速浏览一下以下示例。

document.addEventListener('keydown', (event) => { var keyValue = event.key; var codeValue = event.code; console.log("keyValue: " + keyValue); console.log("codeValue: " + codeValue); }, false);

如您所见，我们创建了一个监听器来监听 keydown 事件。每当按下任何键时，都会调用我们的侦听器，并将该键的值和代码记录到控制台。继续运行它，看看它是如何工作的。

让我们看一下以下示例，该示例演示如何检测用户是否按下了 ctrl + a 或 ctrl + A。

document.addEventListener('keydown', (event) => { if (event.ctrlKey) { if (event.keyCode == 65 || event.keyCode == 97) { console.log("You have just pressed Ctrl + a/A!"); } } }, false);

首先， ctrlKey 是 KeyboardEvent 对象的一个特殊属性，它告诉您在触发 keydown 事件时是否按下了 Ctrl 键。因此，如果 ctrlKey 为 true，则表示按下了 Ctrl 键。

接下来，我们检查按下的字符的 keyCode 值，如果是 65 或 97，则表示是 a 或 A 与 Ctrl 键一起按下。 KeyboardEvent 对象的 keyCode 属性返回按下的键的 Unicode 字符代码。同样，您还可以使用 KeyboardEvent 对象的 shiftKey 属性，该属性告诉您在按下按键事件时是否按下了 Shift 键。触发。

最后，让我们看一下以下示例，该示例演示如何在 HTML 表单的输入字段中仅允许使用字母。

在上面的示例中，我们在输入文本框上定义了 keydown 事件。因此，当用户在文本框中输入任何文本时，它会调用 allowOnlyAlphabets 函数。在 allowOnlyAlphabets 函数中，我们根据字母表的有效 Unicode 范围验证了事件对象的 keyCode 属性的值。因此，如果用户按下有效的字母字符，则 allowOnlyAlphabets 函数将返回 true，否则将返回 false。最终结果是用户将无法输入除字母之外的任何字符。

keyup 事件

在本节中，我们将了解 keyup 事件如何工作。事实上，它的工作原理与 keydown 事件非常相似，唯一的区别是它是在释放按键时触发，而不是在按下按键时触发。

让我们看一下下面的例子。

document.addEventListener('keydown', (event) => { var keyValue = event.key; var codeValue = event.code; console.log("keydown event, keyValue: " + keyValue); console.log("keydown event, codeValue: " + codeValue); }, false); document.addEventListener('keyup', (event) => { var keyValue = event.key; var codeValue = event.code; console.log("keyup event, keyValue: " + keyValue); console.log("keyup event, codeValue: " + codeValue); }, false);

在上面的示例中，当您按下任意键时，将首先触发 keydown 事件，然后触发 keyup 事件。例如，如果您按 a 键，您应该在控制台上看到以下输出。请务必注意事件的触发顺序。

keydown event, keyValue: a keydown event, codeValue: KeyA keyup event, keyValue: a keyup event, codeValue: KeyA

让我们看一下以下示例，它演示了如何在项目中使用 keyup 事件。

在上面的示例中，我们在输入文本框上定义了 onkeyup 事件。因此，当用户在文本框中输入任何文本时，它都会调用 getSearchResults 函数。在 getSearchResults 函数中，我们将进行 AJAX 调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果，而无需刷新整个页面。

重要的 KeyboardEvent 对象属性

在最后一节中，我将总结 KeyboardEvent 对象的重要属性。事实上，我们已经在到目前为止讨论的示例中看到了一些常用的属性，例如 key 和 code。我们还将在本节中讨论一些其他重要属性。