A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Detect toggle key is on or off (caps lock, etc)


Many native apps have a function of detect caps lock detect when user watching log in screen.

I think Web apps must have this too.

Many developers have headache of detect caps lock on login screen. maybe. I have too.

Some client requests it. yes. it’s possible when user key pressing.

but, before key press, Web app can’t detect caps lock is on.

So, I have a wish that add a key event of detect toggle keys like what caps lock is on or off.


Could you provide a use case? How could caps lock detection be useful for a web app?


I think this is a use case @composite had in mind:

  1. Open app Foo
  2. Enable Caps Lock
  3. Open Browser
  4. Focus a password input
  5. Start typing

I think it’s at step 5 here where if there was an API for toggle key state, the web page could pop up a helpful message saying “Looks like you have caps lock on!” to help users who may have forgotten and are accidentally repeatedly typing an all-caps variant of their password.

If my understanding is correct, currently you could listen for the keydown event on Caps Lock, but if the keydown happens outside the browser, such as in app Foo, the Browser would never know and thus not be able to track the key state correctly.


I had the same use case in mind when I read @composite 's message.

Maybe the browser should warn the user upon entering a password field with CAPS LOCK on by default (instead of having every app doing it itself).

Also, an app could detect (although probably not entirely reliably) that CAPS LOCK is on by observing the effects (i.e. only uppercase characters being typed in the input field.)

With all that said, it looks like DOM Level 3 Events has support for Caps Lock detection if I’m reading it correctly; I don’t know the status of its implementation though.


That’s right. current browser can’t detect capslock key until keydown event.


It seems that property is key specific event property. I think.


Indeed; I had overlooked that part of your initial request. Can you say more on why you want to detect it ahead of any keyboard input? It would seem to me that alerting the user when they start typing should be good enough, but you probably have more hands-on experience on this :slight_smile: