Обнаружение и предупреждение пользователей о том, что caps lock включен

Question

Обнаружение и предупреждение пользователей о том, что caps lock включен

Как реализовать обнаружение и предупреждение пользователей, когда caps lock включен со стилем всплывающей подсказки в typescript (angular 4.2.2)?? Возможно, с некоторыми ключевыми событиями, или как toUpperCase() в JS.

685 2

angular

2 ответов:

Comments

Ничего не найдено.

Vega · Accepted Answer · 2017-12-14 19:51:30

Напишите директиву, в которой добавьте Листнер:
    @Output('capsLock') capsLock: EventEmitter<Object>;

    @HostListener('window:keydown', ['$event'])
        onKeyDown(event: KeyboardEvent): void {
         const capsOn = event.getModifierState && event.getModifierState('CapsLock');
         if(capsOn){
            this.capsLock.emit(true);
         }
    }
Добавьте его в основную оболочку div вашего компонента, и ваш компонент будет слушать 'emits', и как только он получит true, выскочит сообщение, подобное этому one. Измените его стиль (возможно, не серый фон) и размер (меньше, размер всплывающей подсказки), сделайте его скрытым и отображаемым с помощью *ngIf, условием которого является ответ от вашего слушателя (через @Output к компоненту).

Для получения подсказки, посмотрите на эту ссылку : http://valor-software.com/ngx-bootstrap/index-bs4.html#/popover

Jamie Rees · Accepted Answer · 2017-07-11 16:13:15

Я не думаю, что Angular может сделать это из коробки (AngularJS может).

Есть несколько библиотек, которые могут сделать это, хотя было бы полезно проверить capsLock (NPM, GitHub )

Вы можете использовать observable, чтобы проверить, включен ли caps lock, а затем сделать пользовательские вещи
capsLock.observe(function (result) {
    // Do stuff
});
Вот пример из readme Github: https://rawgit.com/aaditmshah/capsLock/master/demo.html