如何在 Angular 中将特定按键绑定到 keyup 和 keydown 事件

本文介绍了如何在Angular2模板中通过keyup和keydown伪事件绑定特定键名，以简化键盘事件处理，减少手动检查键值的工作。特别提到了对特殊键、组合键和字母数字键的支持。

简介

当在 Angular 2+ 模板中绑定 keyup 或 keydown 事件时，可以指定 键名。这将应用一个过滤器，只有在按下特定键时才会触发事件。

在本文中，您将学习如何在监听 keyup 和 keydown 事件时使用键名。

使用键名

首先，让我们看一个不使用键名的示例。

假设我们有一个 元素供用户提供信息。我们希望在用户按下 ENTER 键时记录到控制台：

<input (keydown)="onKeydown($event)">

我们绑定了一个 keydown 事件处理程序，触发 onKeydown()：

接下来，让我们编写 onKeydown() 函数来处理按下 ENTER 键：

onKeydown(event) {
  if (event.key === "Enter") {
    console.log(event);
  }
}

在每个 keydown 事件上执行检查，以确定 event.key 的值是否为 Enter。如果为 true，我们将 event 记录到控制台。

现在是相同的示例，但添加了 ENTER 键名到事件中：

<input (keydown.enter)="onKeydown($event)">

我们绑定了一个 keydown.enter 伪事件 处理程序，触发 onKeydown()：

接下来，让我们重写 onKeydown() 函数：

onKeydown(event) {
  console.log(event);
}

通过依赖 Angular 的 keydown.enter 伪事件，不再需要手动检查 event.key 的值是否为 Enter。

使用特殊修饰键和组合键

此功能适用于特殊和修饰键，如 ENTER、ESC、SHIFT、ALT、TAB、BACKSPACE 和命令 (meta)：

但它也适用于字母、数字、箭头和功能键 (F1 到 F12)：

以下是 Angular 能够过滤的键值的完整列表。

您还可以将键组合在一起，只有在触发键组合时才触发事件。在下面的示例中，只有同时按下 CONTROL 和 1 键时事件才会触发：

<input (keyup.control.1)="onKeydown($event)">

以下是更多示例，让您了解可能的情况：

结论

您已经学会了 Angular 2+ 模板如何支持使用 keyup 和 keydown 伪事件过滤键名。

这种方法的好处包括减少手动检查键值和处理修饰键和非修饰键组合的重复性。