Главная » Статьи » Псевдо-события Angular для работы с клавиатурой

Псевдо-события Angular для работы с клавиатурой

Псевдо-события Angular для работы с клавиатурой

От автора: Angular предлагает отличную функцию, с помощью которой легко прослушиваются события клавиатуры. Несмотря на то, что в документации по привязке шаблонов Angular она упоминается, как псевдо-событие, очень кратко, другой документации по этой функции нет. Прежде всего, чтобы определить, какие проблемы решают псевдо-события Angular, давайте рассмотрим простую задачу, когда вам нужно добавить команду UNDO к чек-боксу переключения. Команда UNDO должна вернуть последний выбор пользователя.

Так же, как мы выполняем команду UNDO на компьютерах, команда должна сопоставляться с комбинацией клавиш CTRL + Z. Пример ниже показывает, как мы можем выполнить задачу без псевдо-событий:

Как вы можете видеть в приведенном выше примере, я использую KeyboardEvent.key, чтобы проверить, какая клавиша нажата. Существуют также другие свойства KeyboardEvent, которые вы можете использовать для проверки и захвата нажатий клавиш, такие как KeyboardEvent.key, KeyboardEvent.charCode, KeyboardEvent.keyCode или KeyboardEvent.which. Однако некоторые из них устарели или поддержка в различных браузерах для них не одинакова. Кроме того, чем больше комбинаций клавиш нам нужно прослушивать, тем более запутанным становится синтаксис.

Псевдо-события Angular решают все вышеперечисленные проблемы. Они позволяет напрямую привязываться к конкретному сочетанию клавиш или комбинации клавиш. Это означает, что событие клавиатуры будет запущено только для этой конкретной клавиши или комбинации клавиш, а не для всех событий клавиш. Ниже приведен пример объявления псевдо-событий в шаблоне:

<input (keyup.enter)='...responds to enter...' />
<input (keydown.esc)='...responds to escape...' />
<input (keyup.shift.f)='...responds to shift+f...' />

Теперь посмотрим, как псевдо-события могут облегчить нам прослушивание комбинации клавиш CTRL + Z:

Как видите, нам больше не нужно проверять, какие нажатия клавиш зарегистрированы, потому что мы указываем комбинацию клавиш, на которую должен реагировать наш обработчик, и синтаксис стал более декларативным.

Использование псевдо-событий Angular в @HostListener

Как и любые другие события DOM, вы можете прослушивать псевдо-события через @HostListener:

@HostListener('keydown.control.z') undo(event: KeyboardEvent) { // отвечает на control+z }

Конечно, если элемент хоста не настраивается или вам нужно захватить событие клавиатуры вне зависимости от того, откуда оно было запущено, вы можете связать событие с глобальным элементом следующим образом:

@HostListener('document:keydown.control.z') undo(event: KeyboardEvent) { // отвечает на control+z }

Имена клавиш в псевдо-событиях

Теперь рассмотрим следующий пример комбинации клавиш псевдо-событий:

<input (keydown.control.shift.z)='...'/>

Вам может быть интересно, откуда берутся эти имена, такие как control, shift и z. Они не уникальны для псевдо-событий Angle. Фактически, это не чувствительные к регистру значения свойств клавиш KeyboardEvent. Если вы хотите просмотреть полный список значений свойств клавиш клавиатуры, перейдите по этой ссылке. Теперь перейдем к значениям клавиш, которые доступны для псевдо-событий Angle.

Модификаторы клавиш

К модификатора клавиш относятся Shift, Control, Alt (Option) и Meta (Command). Поэтому на любые другие клавиши я буду ссылаться, как на не-модификаторы. Псевдо-события модификаторов клавиш выглядят следующим образом:

<input (keyup.control)='...respond to ctrl/control...' />
<input (keyup.alt)='...respond to alt/option...' />
<input (keyup.shift)='...respond to shift...' />
<input (keyup.meta)='...respond to command...' />

Существует несколько моментов, которые нужно учитывать, чтобы использовать модификаторы клавиш в Angular. Во-первых, любая комбинация клавиш должна содержать как минимум один модификатор клавиш и только одну клавишу не-модификатор. Например, следующий случай не будет работать, поскольку комбинация состоит только из буквенных клавиш:

<input (keyup.a.z)='...respond to a+z...' />

Во-вторых, клавиша не-модификатор должна всегда определяться в самом конце комбинации клавиш. Ниже приведено правильное размещение клавиши не-модификатор, так как Z (клавиша не-модификатор) определена в конце:

<input (keydown.control.z)='...responds to control+z...' />

Напротив, ниже приведен пример неправильного размещения клавиши не-модификатора:

<input (keydown.z.control) = '... не будет отвечать вообще ...' />

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

<input (keydown.shift.control.z)='...responds to shift+control+z...' />
<input (keydown.control.shift.z)='...responds to control+shift+z...' />

Давайте перейдем к примерам клавиш не-модификаторов.

Функциональные клавиши

<input (keyup.f5)='...responds to F5...' />
<input (keyup.f12)='...responds to F12...' />

Клавиши букв и цифр

<input (keyup.0)='...responds to 0...' />
<input (keyup.9)='...responds to 9...' />
<input (keyup.a)='...responds to a...' />
<input (keyup.z)='...responds to z...' />

Клавиши стрелок

<input (keyup.arrowup)='...responds to arrowup...' />
<input (keyup.arrowright)='...responds to arrowright...' />

Другие клавиши

<input (keyup.enter)='...responds to enter...' />
<input (keyup.esc)='...responds to escape...' /> <input (keyup.escape)='...responds to escape...' />
<input (keyup.backspace)='...responds to backspace...' />
<input (keyup.tab)='...responds to tab...' />

В настоящее время есть только две клавиши, которые являются исключениями: точка и пробел. Когда вы нажмете на клавиатуре клавишу точки, ее значение KeyboardEvent.key будет «.». Но, как вы можете себе представить, было бы синтаксически неправильным использовать его в псевдо-событии, так как этот символ используется в качестве разделителя в комбинациях клавиш. Вот почему точка соответствует ключевому слову «dot». Поэтому вы должны сделать следующее, чтобы правильно прослушать нажатие клавиши точки:

<input (keydown.dot)='...responds to dot...'/>

…вместо:

<input (keydown..)='...won't respond at all...'/>

То же самое относится к нажатию клавише пробела. Поскольку ее значение свойства KeyboardEvent.key — « », оно отображается через ключевое слово «space» для лучшей читаемости. Поэтому вместо:

<input (keydown. )='...won't respond at all...'/>

вы должны определить клавишу так:

<input (keydown.space)='...won't respond at all...'/>

К сожалению, псевдо-события Angular по-прежнему не включают такого рода сопоставлений для большинства клавиш символов, таких как «минус», «равно», «слэш», «кавычки», «апостроф» и т. д. Поскольку они являются символьными клавишами, это приводит к плохой читаемости, а иногда даже нарушает привязку. Например, если я хочу прослушать нажатие клавиши «минус», я могу сделать это только следующим образом:

<input (keydown.-)='...responds to minus...'/>

Как вы можете видеть, это выглядит довольно странно или синтаксически неправильно, но это работает. Это было бы более читаемым или, по крайней мере, приятней для глаза, если бы значение сопоставлялось с ключевым словом: «minus». Как насчет нажатия клавиши «равно»?

<input (keydown.=)='...breaks the binding...'/>

Если вы попытаетесь прослушивать нажатие клавиши «равно», как показано выше, это сломает привязку вашего шаблона, потому что не существует сопоставления с ключевым словом «equal».

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

Прочитав этот пост, я надеюсь, что вы получили несколько идей относительно того, как использовать псевдо-события Angular.

Автор: Shijir Tsogoo

Источник: https://medium.com/

Редакция: Команда webformyself.