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?

Out of interest, what are you using caps lock for? As a user, I almost think of caps lock as "not a key", and am slightly surprised it fires any events at all! — aaaidan, Aug 23 '16 at 08:35
lol, I'm designing a small quick-hands-game inspired from dota. Based on comfort, people keep caps lock as a key since it's very close to the W-A-S-D. — bigOmega ツ, Aug 31 '16 at 10:38

score 5 · Accepted Answer · answered Sep 27 '16 at 04:57

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'

Yes, this seems like the closest solution we could get. Though for a quick-key-press game with a timer, handling the `keyup` event instead of the `keydown` event makes a huge difference :( — bigOmega ツ, Sep 27 '16 at 09:23

score -1 · Answer 2 · answered Mar 24 '19 at 18:28

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.

keyDown event is not fired for Capslock in Mac

2 Answers2

Linked