keyDown event is not fired for Capslock in Mac

Question

CHROME (52):

When turning caps lock ON - only keydown is fired (no event in keyUp or keyPress)

When turning caps lock OFF - only keyup is fired (no event in keyDown or keyPress)

FIREFOX (46):

Only keyDown event is fired for both caps lock ON & OFF (no keyUp or keyPress)

I've read about the keyCodes and events here http://www.quirksmode.org/js/keys.html and in MDN here https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode, aaaand here http://unixpapa.com/js/key.html

But none of the above links talks about this weird behaviour. Is this expected? If so, any easier way to handle it?

Answer 1

I had been looking for an answer to a very similar issue. Pranesh's answer pointed me in a direction.

In my case, I wanted to warn users that their capslock is on when they go to log in. Ultimately I settled on the following solution.

Angular Component:

export class AuthenticateComponent {
  public capslockOn: boolean;

  constructor() {
    this.capslockOn = false;
  }

  public keyup(event: KeyboardEvent): void {
    if (event.key === 'CapsLock') {
      // Checks / sets when the Caps Lock key is specifically pressed.
      this.capslockOn = (!this.capslockOn && event.getModifierState('CapsLock'));
    } else {
      // Checks all other conditions like the Caps Lock was on before the user
      // loaded the form and began typing in it.
      this.capslockOn = event.getModifierState('CapsLock');
    }
  }
}

Then I just call the keyup function from my form:

<form ... (keyup)="keyup($event)">

Any keypress in the form - username or password - will check / set the boolean capslockOn and I can *ngIf that to show an icon or message or both.

Thanks for the explanation Pranesh. It helped quite a bit.

Answer 2

Yes, this is expected.

Chrome treats the CAPS ON as keydown because it treats the on/off as press and hold, like we hold shift key, which turns on caps on behaviour and turns off when we release it. This Caps Lock button also. When you turn on Caps Lock, chrome handles the 'turn on' as a keypress and when you 'turn off' it handles it as a keyup. But, firefox handles everything as keydown which doesn't make sense to me when compared to how chrome handles the same.

Solution

You should use getModifierState() to get the state of the Caps Lock. This is supported in chrome and firefox.

Hope it helps!

$(function() {
  $(window).on("keydown", function(e){
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
  $(window).on("keyup", function(e) {
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Focus here and press 'Caps Lock'