Это интересный, но довольно часто ожидаемый вариант использования: как предупредить пользователя о включенном 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.

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

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

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

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

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

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

this.cdRef.markForCheck();

Подпишитесь на меня в Instagram: https://www.instagram.com/ewumesh/

Купи мне кофе: https://www.buymeacoffee.com/ewumesh

Бит: почувствуйте мощь компонентно-ориентированной разработки

Скажи привет Bit. Это инструмент №1 для разработки приложений на основе компонентов.

С помощью Bit вы можете создать любую часть своего приложения в виде «компонента», который можно компоновать и использовать повторно. Вы и ваша команда можете совместно использовать набор компонентов для более быстрой и последовательной совместной разработки большего количества приложений.

  • Создавайте и компонуйте «строительные блоки приложения»: элементы пользовательского интерфейса, полные функции, страницы, приложения, бессерверные или микросервисы. С любым стеком JS.
  • С легкостью делитесь и повторно используйте компоненты в команде.
  • Быстро обновляйте компоненты в разных проектах.
  • Делайте сложные вещи простыми: Монорепо, дизайн-системы и микрофронтенды.

Попробуйте Bit бесплатно и с открытым исходным кодом→

Узнать больше



Как мы создаем микроинтерфейсы
Создаем микроинтерфейсы для ускорения и масштабирования нашего процесса веб-разработки.blog.bitsrc.io





Как мы создаем систему проектирования компонентов
Создаем систему проектирования с компонентами для стандартизации и масштабирования процесса разработки пользовательского интерфейса.blog.bitsrc.io





Как повторно использовать компоненты React в своих проектах
Наконец-то вы выполнили задачу по созданию фантастического поля ввода для информационного бюллетеня в своем приложении. Вы довольны…bit.cloud





Безболезненное управление зависимостями монорепозитория с помощью Bit
Упростите управление зависимостями в монорепозитории, чтобы избежать проблем с фантомными зависимостями и версиями. Узнайте о…bit.cloud