Как связать определенные клавиши с событиями Keyup и Keydown в Angular

Введение

При привязке к событиям keyup или keydown в ваших шаблонах Angular 2+ вы можете указать названия клавиш. Это применит фильтр, который будет применяться к событию, поэтому он будет срабатывать только при нажатии определенных клавиш.

В этой статье вы узнаете, как использовать имена клавиш при прослушивании событий 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);
}

Полагаясь на псевдособытие keydown.enter Angular, больше не нужно вручную проверять, является ли значение event.key Enter .

Использование специальных клавиш-модификаторов и комбинаций

Эта функция работает для специальных клавиш и клавиш-модификаторов, таких как ENTER, escape (ESC), SHIFT, ALT, TAB, BACKSPACE и команда (мета):

Но он также работает для букв, цифр, стрелок и функциональных клавиш (от F1 до F12):

Вот полный список ключевых значений, которые Angular может фильтровать.

Вы также можете комбинировать клавиши вместе, чтобы инициировать событие только при срабатывании комбинации клавиш. В следующем примере событие сработает только при одновременном нажатии клавиш CONTROL и 1:

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

Вот еще несколько примеров, чтобы дать вам представление о том, что возможно:

Заключение

Вы узнали, как шаблоны Angular 2+ поддерживают фильтрацию имен ключей с помощью псевдособытий keyup и keydown.

Преимущества этого подхода включают меньше повторяющихся ручных проверок значений ключей и обработку комбинаций клавиш-модификаторов и клавиш без модификаторов.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.