jQuery Caps Lock Plug-In

The Caps Lock plug-in is a very simple script to try to determine if the user has their caps lock key on. Unfortunately, JavaScrit does not have a method to directly determine if the caps lock key is actually on. We are therefore left with only one recourse: guess.

We are able to determine the ASCII code of the letter typed, and whether or not the shift key was involved. Specifically, we take the character, use JavaScript to convert it to upper case, and compare with the original. If the original and the upper-case version are the same, and the shift key was not pressed, then we assume the caps lock was on. There are, of course, exceptions to this rule. Numbers, colons, periods, etc... They all are equal to their capitalized version, and will type the same with or without the caps lock key on. So, if we get one of these characters, we report that the state is indeterminable.

This is a very simplistic approach, but unfortunately I haven't found a better alternative yet. Eventually, I'd like to be able to detect the language of the page and make a smarter guess even when non-ascii characters are typed. If anyone has UTF-8 experience and would like to contribute, please contact me.

As a general rule, you will probably only be doing caps lock detection on password fields, and you only need to take action when the caps lock key is on (i.e. warning the user that the they may be getting unexpected results. Keep in mind that the plug-in is going to fire an event with each key press. So, if the password is "aBc!CbA", and the user's caps lock key is on, it will fire these events:

Note that different events will fire as the user is typing. Since you might have the situation where caps_lock_on fires, then one of the other events fires, and then caps_lock_on again, you probably want to do something like showing a hidden div with a warning message that fades over time. If it appears, disappears, and then appears again you will present the user with an annoying strobe effect. If, however, it just begins to fade out, and then appears back at full visibility, the UI will not be too jarring for the user.

Example:

$(document).ready(function() {

	var options = {
		caps_lock_on: function() {
			alert("Caps Lock on");
		},
		caps_lock_off: function() {
			alert("Caps Lock off");
		},
		caps_lock_undetermined: function() {
			alert("Can't determine Caps Lock state");
		}
	};

	$("input[type='password']").capslock(options);

});
						

Options:

caps_lock_on

Function to be run when caps lock is detected to be on. Default is an empty function (i.e. do nothing).

caps_lock_off

Function to be run when caps lock is detected to be off. Default is an empty function (i.e. do nothing).

caps_lock_undetermined

Function to be run when caps lock state can't be determined. Default is an empty function (i.e. do nothing).

mac_shift_hack

Boolean value. On Mac's specifically when you hold down the shift key and type a letter, you will get the upper case letter regardless of the state of the caps lock key. This means that it is technically not determinable what the state of the caps lock key is when you are holding down the shift key and you get an upper case letter. In most cases this is not a big deal. You generally need to know if the caps lock key is on in a password field, where someone can't see the output they are typing. In this specific case, the resulting output is the same regardless of the state of the caps lock key: an upper case letter. So, giving the user an alert isn't necessary in that case. This setting defaults to true which fires the caps_lock_off event. Set this to false if you would rather the caps_lock_undetermined event were fired.

debug

Boolean value. Turns on console logging, if available. Defaults to false.

Implementation:

• Set of Objects: $("input[type='password']").capslock(options);
• One Object: $("#my_password").capslock(options);

• Version 0.4 - Updated to jQuery 1.6.2. Added caps_lock_undetermined method. Simplified method for determining if the capslock status is indeterminable. Big shout out to Adrian D. Alvarez for helping work through the special situation presented on a Mac.
• Version 0.3 - Updated to jQuery 1.4.4. Revised methodology to support all ASCII characters, and rely on JavaScript localization to detect capitalization.
• Version 0.2 - Added support for targeting the event.
• Version 0.1 - Initial release

Dual licensed under the MIT and GPL licenses: