如何将特定键绑定到Angular中的Keyup和Keydown事件

介绍

当绑定到 Angular 2+ 模板中的 keyup 或 keydown 事件时，您可以指定 键名。 这将应用要应用于事件的过滤器，因此仅在按下特定键时才会触发。

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

使用键名

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

假设我们有一个 <input> 元素供用户提供信息。 当用户按下 ENTER 键时，我们希望登录到控制台：

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

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

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

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

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

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

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

我们绑定了一个触发 onKeydown() 的 keydown.enter pseudo-event 处理程序：

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

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

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

使用特殊修饰键和组合

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

键	键名
ENTER	<input (keydown.enter)="...">
ESC	<input (keydown.esc)="...">
ALT	<input (keydown.alt)="...">
TAB	<input (keydown.tab)="...">
BACKSPACE	<input (keydown.backspace)="...">
CONTROL	<input (keydown.control)="...">
COMMAND	<input (keydown.meta)="...">

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

键	键名
A	<input (keydown.a)="...">
9	<input (keydown.9)="...">
ARROWUP	<input (keydown.arrowup)="...">
F4	<input (keydown.f4)="...">

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

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

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

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

键	键名
SHIFT+ESC	<input (keydown.shift.esc)="...">
SHIFT+ARROWDOWN	<input (keydown.shift.arrowdown)="...">
SHIFT+CONTROL+Z	<input (keydown.shift.control.z)="...">

结论

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

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

如果您想了解有关 Angular 的更多信息，请查看 我们的 Angular 主题页面 以获取练习和编程项目。