Hey, this should work for accented letters.

var char = string.fromCharCode(which);
if(char.toLowerCase() == char) var is_lower_case = true;
if(char.toUpperCase() == char) var is_upper_case = true;

Nevermind that I could have figured this out on my own, but I sure as hell wouldn’t have thought of it… this is a genius usability enhancement to any password form! I can’t think of how many times I’ve retyped in a password over and over ‘thinking’ I’m typing it correctly, only to find out I had caplocks on.

Well done.

Great!
I love these little usability enhancements. You have certainly done some nice hacking, thanks a lot.

under what license is this javascript code released?

without knowing the license we cant use this.

It’s a great idea and works almost. My Safari 3 and Firefox 2.0.0.11 reports the same keyCode when caps lock is on, no matter if shift is pressed or not. This makes the script works great if you don’t have Caps lock on and use shift at the same time.

Now this is what I call thinking outside the box! This is a great usability trick.

Thanks for the great article Stuart, I will be using this in future projects.

A neat idea but falls down in some cases because of the assumption on the nature of keyboard operation. Some keyboards – definitely the iPhone and I suspect also assistive techniques such as Sticky Keys on Windows – let you type capitals without enabling caps lock or holding down shift so the assumption fails.

For the iPhone you could include an exception based on the user-agent. But clearly that won’t capture all such quirky keyboards.

How well does this work for non-English locales? It looks like it won’t display the caps lock warning if the user enters an accented letter. I wonder what happens in non-latin locales?

Can someone please make a greasemonkey script that uses this? It’d be worth its weight in gold.

Hey Arthus,

I would just add an event listener for focus on the input. Could be possible to attach a listener to the window load as well, etc.

I’ll guesstimate that 10-20% of casual users use caps lock for single characters in stead of shift when entering passwords after observing hundreds of university students enter their passwords working as first line support.

James: hand on heart, I’m not sure. I did consider the issue of non-English locales, but I don’t know enough about what happens if you capitalise a non-English letter. I’d love to hear commentary from people who know about this so that the script can correctly handle those characters!

shifted letters are lower-case if Caps Lock is on

As possibly mentioned above, this isn’t true on the Mac. I don’t think that matters though: I can’t imagine many people putting caps lock on, then holding down shift when they type letters.

Anyone have an idea why this doesn’t work in a <td> form element?

good but will not work with IE6. any fix out there?

Very cool and inventive technique. However, there has to be a way to do this without first requiring a user to enter a letter. Otherwise, a certain amount of nice functionality is lost.

For instance, whenever entering a password in Mac OS X and you have the Caps Lock key on a cool little up arrow shows up in the field. Is there a method of detecting before a user enters anything (and then applying some CSS class, etc.)

I know it is possible with IE, but I think it would be best to find some cross browser method. http://concepts.waetech.com/caps_lock/

I have an italian keyboard and I can confirm that it won’t display the caps lock warning if the user enters an accented letter. Too bad.