Earlier today, I saw a user attempt to type his password in both Internet Explorer 9 and Chrome. In both browsers, he failed to successfully type it in. After 3 failed attempts, he realized it was due to his caps lock key being pressed. In some cases, a keyboard driver will inform you on screen when you press the caps lock button. If you are lucky enough to use Internet Explorer 10, you’ll notice that it is built into the browser as shown below:
However, not all users are using Internet Explorer 10 and some users have a tablet that doesn’t show that caps lock is on.
An example is shown below:
As you can see, we’re using the :password selector to only apply this to the password elements. However, because we left the isCapsLockOn method separate, we can always use this method on future elements.