### [JavaScript：捕获键盘事件并做出反应](https://www.prosaas.cn/article/2418)

**Published:** 2023-09-04T12:57:02

**Author:** 5201314

**Excerpt:** 在本文中，我们将讨论如何在 JavaScript 中捕获并响应不同的键盘事件。我将向您展示几个现实世界的示例，…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212120853181.jpg)

在本文中，我们将讨论如何在 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 表单的输入字段中仅允许使用字母。

<script>
function allowOnlyAlphabets(event) {
  var charCode = event.keyCode;

  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
    return true;
  else
    return false;
}
</script>
<html>
  <body>
    <div>
        <input type="text" onkeydown="return allowOnlyAlphabets(event);">
    </div>
  </body>
</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` 事件。

<script>
function getSearchResults(event, element) {
  if (element.value.length > 6) {
    var searchKeyword = element.value;
    // make an AJAX call to fetch search results for "searchKeyword"
  }
}
</script>
<html>
  <body>
    <div>
           <input type="text" onkeyup="return getSearchResults(event, this);">
    </div>
  </body>
</html>

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

## 重要的 `KeyboardEvent` 对象属性

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

-   `**key**`：返回按下的字符。例如，如果按下**a**字符，则会返回 `a`。
-   `**code**`：返回字符的物理键码。例如，如果按下**a**字符，则会返回 `KeyA`。
-   `**keyCode**`：返回按下的按键的Unicode字符代码。
-   `**ctrlKey**`：告诉您触发按键事件时是否按下**Ctrl**键。
-   `**altKey**`：告诉您触发按键事件时是否按下了**Alt**键。
-   `**shiftKey**`：告诉您触发按键事件时是否按下**Shift**键。
-   `**metaKey**`：告诉你触发按键事件时是否按下了**Meta**键。在大多数情况下，**Meta** 键是键盘上位于 **Ctrl** 和 **Alt** 键之间的键。
-   `**位置**`：返回键盘或设备上按键的位置。

如您所见，`keyboardEvent` 对象提供了各种属性，允许您检测不同的按键。在大多数情况下，您将使用 `keydown` 事件来检测按下的按键并执行相应的操作。正如我们之前讨论的，您不应该使用 `keypress` 事件，因为它迟早会被弃用。

## 结论

今天，我们讨论了如何在 JavaScript 中使用键盘事件以及几个实际示例。

以上就是JavaScript：捕获键盘事件并做出反应的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** ajax, html, JavaScript, 事件, 对象, 常量, 键盘事件

**Categories:** WordPress

---