Я пытаюсь реализовать событие клавиатуры, чтобы определить, включен ли у пользователя Caps Lock при вводе в поле ввода, поэтому у меня есть такой компонент:

<span onkeyup="{!c.keyCheck}">
    <lightning:input aura:id="pwInput" type="password" label="Password" />
</span>

Я использую event.getModifierState() метод для передачи значения ключа «CapsLock»:

keyCheck : function(component, event, helper) {       
    if (event.getModifierState("CapsLock")) {
        console.log("Caps lock on");
    } else {
        console.log("Caps lock off");
    }
}

Это вызывает ошибку TypeError: Illegal invocation:

TypeError: Illegal invocation
    at Object.l (aura_prod.js:24)
    at Object.checkCapsLock (MyComponent.js:258)
    at keyCheck (MyComponent.js:78)
    at J.Uc (aura_prod.js:507)
    at aura_prod.js:399
    at $.B.gb (aura_prod.js:834)
    at Object.Vi (aura_prod.js:399)
    at Object.gp (aura_prod.js:399)
    at HTMLSpanElement.b (aura_prod.js:830)
    at HTMLSpanElement.t.$$lwcEventWrapper$$ (aura_prod.js:2) 

Я могу сделать это на простой HTML-странице, поэтому я не знаю, почему я получаю эта ошибка. Какие-либо предложения?

2
Matt Smith 8 Июн 2019 в 17:26
2
Возможно, это связано с обслуживанием шкафчиков.
 – 
Adrian Larson
7 Июн 2019 в 23:00
console.log(event); показывает getModifierState: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)
 – 
Pranay Jaiswal
7 Июн 2019 в 23:07

1 ответ

Лучший ответ

Похоже, служба хранения не любит getModifierState.

Вы должны реализовать isCapsLock по-старому, как показано здесь на StackOverflow.

Получите KeyCode символа, проверьте, находится ли он от A до Z и нажат ли Shift или нет, чтобы определить, включена ли заглавная буква или нет.

Я быстро проверил это, и это работает как шарм.

Контроллер:

({
    keyCheck : function(component, event, helper) {  
        console.log(helper.isCapslock(event));

    }

})

Helper :

({
    isCapslock :function(e){

        e = (e) ? e : window.event;

        var charCode = false;
        if (e.which) {
            charCode = e.which;
        } else if (e.keyCode) {
            charCode = e.keyCode;
        }

        var shifton = false;
        if (e.shiftKey) {
            shifton = e.shiftKey;
        } else if (e.modifiers) {
            shifton = !!(e.modifiers & 4);
        }
        if (charCode >= 97 && charCode <= 122 && shifton) {
            return true;
        }

        if (charCode >= 65 && charCode <= 90 && !shifton) {
            return true;
        }

        return false;

    }

})
1
Pranay Jaiswal 7 Июн 2019 в 23:21
Спасибо Пранай! keyCode устарел, нет, поэтому я Я надеялся пойти с getModiferState(), но если Locker Service ограничивает его, у меня может не быть выбора. Спасибо, что изучили это.
 – 
Matt Smith
8 Июн 2019 в 16:22
Единственное, что касается этого решения, это то, что оно сообщает мне только о том, набирает ли пользователь альфа- или не-альфа-символ, и только если был нажат Caps Lock, но не состояние Caps Lock (вкл / выкл), что что делает getModiferState(). К сожалению, я не думаю, что это сработает для меня.
 – 
Matt Smith
8 Июн 2019 в 19:20