Обработка события включения/выключения CAPS-LOCK в Angular

Это интересный, но довольно часто встречающийся случай использования — предупредить пользователя о том, что CAPS-LOCK включен, особенно во время ввода пароля, чтобы пользователь знал об этом и мог изменить его при необходимости.

В этой демонстрации рассматривается несколько сценариев:

1. Изменение сообщения, когда пользователь переключает caps-lock в поле пароля.
2. Также измените сообщение, когда пользователь меняет состояние caps-lock в другом месте (возможно, в другом приложении или вкладке браузера и т.д.), а затем возвращается в это приложение.
3. Удалите события при уничтожении компонента, чтобы предотвратить утечку памяти.
4. Запускать обнаружение изменений, когда ChangeDetectionStrategy имеет значение OnPush.

Посмотрим на 1 & 2.

Кстати, я на @angular/cli 13.3.0 и @angular/material 13.3.6. Для сообщения я использовал mat-hint на mat-form-field.

Для этого мы берем ссылку на поле пароля (используя @ViewChild), а затем добавляем пару обработчиков событий к лежащему в основе HTMLInputElement — keyup и mousedown.

Обработчик события keyup переключит сообщение, когда пользователь нажмет кнопку CAPS-LOCK, находясь в поле пароля. При этом генерируется событие KeyboardEvent.

Обработчик события mousedown переключит сообщение, когда пользователь изменит состояние в другом месте, вернется в приложение и нажмет на поле пароля. Это будет полезно для пользователя, поскольку информация теперь предоставляется еще до того, как что-то набрано. Это делается через MouseEvent.

Некоторые улучшения:

Чтобы предотвратить утечку памяти, нам нужно удалять эти обработчики событий после уничтожения компонента.

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

this.cdRef.markForCheck();

Менеджер паролей браузера может автоматически заполнить данные пароля за вас. Это также вызовет событие keyup, но оно не будет экземпляром KeyboardEvent и, следовательно, не будет иметь метода getModifierState. Поэтому мы его проигнорируем!

if (event?.type === 'keyup' && !(event instanceof KeyboardEvent)) {
  return;
}

Ура!
Буду рад пообщаться с вами на LinkedIn