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

本文主要是介绍如何在 Angular 中将特定按键绑定到 keyup 和 keydown 事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

假设我们有一个 <input> 元素供用户提供信息。我们希望在用户按下 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)">

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

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