2

I'm trying to detect if a user is typing into an input field when the Caps Lock button is on. I've started with an input wrapped within a span that performs an onkeypress check:

<span onkeypress="{!c.keyCheck}">
    <lightning:input aura:id="capsLock" label="test" />
</span>

My Controller.js performs a check for the specific key. Since the Caps Lock key's numeric value is 20, I'm passing that into the keyCheck method:

keyCheck : function(component, event, helper) {
    // Caps Lock numeric value: 20
    if (event.which == 20) {
        var capsLockMessage = component.find("capsLockMessage");
        $A.util.toggleClass(capsLockMessage, "slds-hide");
        alert("Caps Lock was pressed");
    }
}

However, this isn't firing. Do you have any suggestions?

  • can you try to put in div and use onkeyup="{! c.keyCheck} event – sdandamud1 Jun 5 '19 at 20:17
3

It should not be onkeypress, but should be onkeyup.

In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browser

<span onkeyup="{!c.keyCheck}">
    <lightning:input aura:id="capsLock" label="test" />
</span>

Js:

({
    keyCheck : function(component, event, helper) {
    // Caps Lock numeric value: 20
    console.log(event.which);
    if (event.which == 20) {
        var capsLockMessage = component.find("capsLockMessage");
        $A.util.toggleClass(capsLockMessage, "slds-hide");
        alert("Caps Lock was pressed");
    }
}
})

Src: https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown

  • 1
    Thanks, Pranay! That works! – Matt Smith Jun 5 '19 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.