Caps Lock Detection

UPDATED 2009.09.06 - Updated to support Opera Operating system logons (well OS X at least) provide a visual indicator alerting you to when you have caps lock turned on when you are typing your password. This is a pretty cool feature and it is actually really easy to implement in JavaScript. The vast majority of your users will type upper case letters in one of two ways: pressing the shift key or turning on caps lock. Following that assumption, you can easily check to see if a keypress event has the shift key pressed and what the charCode was. A simple function to detect caps lock and enable a visual cue would look something like this: [js] $(":password").keypress(function(e) { //Opera doesn't populate the charCode var charCode = e.charCode || e.which; !e.shiftKey && charCode >= 65 && charCode <= 90 ? $("#caps_lock").show() : $("#caps_lock").hide(); }); [/js] Here is the code in action:

CAPS LOCK IS ON!

Safari 4 on OS X will provide a cue for you, but adding a little extra flare to it won't hurt.