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

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

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

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

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

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

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

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

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

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

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

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

…вместо:

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

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

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

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

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

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

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

Автор: Shijir Tsogoo

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

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

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

Laravel+Angular. Быстрый старт

Создание веб-приложения с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте: