От автора: 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.
