Detecting the caps lock key in JavaScript

The ability to detect the caps lock key can improve the usability of web applications — for example, a visitor entering a password could be warned if they have caps lock turned on. Unfortunately JavaScript has no mechanism to query whether caps lock is currently on or off. CapsLock.js works around this limitation by detecting the status of the key each time a letter is typed. In the example below, the light on the virtual key is updated as you type in the box.

Caps
Lock

Download CapsLock.js

Download one of the files below and upload it to your web server.

File Size Description
CapsLock.js 2,260 bytes Full version, with comments
CapsLock.compressed.js 869 bytes Compressed version

Link to the file using a script element in the head of your page:

1
<script type="text/javascript" src="CapsLock.js"></script>

Using CapsLock.js

The current status of the caps lock key can be determined using the isOn function, which returns true if caps lock currently appears to be on and false if it appears to be off:

1
2
3
4
5
6
// check the state of the caps lock key
if (CapsLock.isOn()){

  // caps lock is on

}

Note that a change in the state of the caps lock key is only detected the next time a letter is typed.

The addListener function allows a listener function to be registered. Whenever a change in the state of the caps lock key is detected the listener will be called, with a parameter of true if caps lock is now on and false if caps lock is now off. For example:

1
2
3
4
5
// display a warning when caps lock is turned on
CapsLock.addListener(
    function(status){
      if (status) alert('Warning: you have turned caps lock on');
    });

Implementation

CapsLock.js works by listening for all key press events on the page and, if the key press corresponds to a letter being typed, comparing the case of the letter with the state of the shift key. In Windows, caps lock and shift interact as follows:

caps lock off caps lock on
shift off lower case upper case
shift on upper case lower case

On Macs, the interaction is slightly different, as having both shift and caps lock on does not result in lower case letters:

caps lock off caps lock on
shift off lower case upper case
shift on upper case upper case

As a consequence, CapsLock.js cannot determine the state of the caps lock key on a Mac if shift is on. In practice this is not an issue, as shift is rarely used in combination with caps lock.

Where now?

Found this useful? Share it:

Also in JavaScript: