How to Determine If Caps Lock is On With Javascript

A nice nifty feature you can add to your web login page or maybe somewhere where entering information is case-sensitive is to hint the user if the Caps Lock key is on. While there is no way to capture the caps lock press event itself and you cannot turn the hint on or off by simply pressing it, you can still determine whether it’s on when letter keys are pressed.

The idea behind capturing it is ingenious: because the key code returned by the event is the actual one, you can compare it against the shift key state and determine whether the key code is what it should be. In other words, if the shift key state indicates it is not pressed and you get a key code corresponding to an upper-case letter, that means the caps lock is on. Just the same, if the shift key is down but you get a lower case character, the caps lock is also on.

Here is the javascript function that will return true if the caps lock is on, false if it’s off and null if a non-letter key was pressed:

function checkCapsLock(e)
{
	// get the key code
	var keyCode = e.keyCode ? e.keyCode : e.which;
	// convert to the corresponding character
	var character = String.fromCharCode(keyCode);
	// if it's not a character, let's skip because caps lock has no effect in this case
	if (!/[A-Za-z]/.test(character)) { return null; }
	// get the state of the shift key
	var shiftKeyOn = e.shiftKey || keyCode == 16;
	// if shift key is pressed but the character is lower case, caps lock is on
	// if shift key is not pressed but the character is upper case, caps lock is on
	return = shiftKeyOn ? /[a-z]/.test(character) : /[A-Z]/.test(character);
}

If you would like to quickly test it out for yourself, here is a very simple HTML page you can use, with a little bit of styling added:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test Javascript CapsLock</title>
	<style type="text/css">
		body, input { font-family: Verdana; font-size: 11px; font-weight: bold; }
		#input { display: inline; position: relative; }
		#caps-on-warning { position: absolute; bottom: -24px; left: 8px; padding: 2px 4px; background: #ffffaa; border: 1px solid #ff8800; }
	</style>
	<script type="text/javascript">
	//<![CDATA[
	function checkCapsLock(e)
	{
		// get the key code
		var keyCode = e.keyCode ? e.keyCode : e.which;
		// convert to the corresponding character
		var character = String.fromCharCode(keyCode);
		// if it's not a character, let's skip because caps lock has no effect in this case
		if (!/[A-Za-z]/.test(character)) { return; }
		// get the state of the shift key
		var shiftKeyOn = e.shiftKey || keyCode == 16;
		// if shift key is pressed but the character is lower case, caps lock is on
		// if shift key is not pressed but the character is upper case, caps lock is on
		var capsOn = shiftKeyOn ? /[a-z]/.test(character) : /[A-Z]/.test(character);
		// show/hide hint
		document.getElementById('caps-on-warning').style.visibility = capsOn ? 'visible' : 'hidden';
	}
	window.onload = function() { document.getElementById('password').focus(); };
	//]]>
	</script>
</head>
<body>
	Please enter password: 
	<div id="input">
		<input type="password" name="password" id="password" onkeypress="checkCapsLock(event);" />
		<div id="caps-on-warning" style="visibility: hidden;">Caps Lock is on!</div> 
	</div>
</body>
</html>

This is a very simple example and I am sure you would be able to customize it to your needs. Hope this helps someone!

This entry was posted in Javascript and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *