In this short article I will explain a very interesting topic i.e. to detect whether the keyboard Caps Lock key is ON or OFF dynamically when typing into a TextBox using JavaScript and jQuery.
There is no way to detect whether in a browser but by writing some logic to detect the various keyboard keys I have developed a code that does the job and works in all browsers.
Detecting Caps Lock key is ON or OFF when typing into a TextBox using JavaScript and jQuery
Below is the complete HTML page along with the script for detecting whether the keyboard Caps Lock key is ON or OFF dynamically when typing into a TextBox.
I have assigned three jQuery event handlers to the TextBox namely KeyDown, KeyUp and KeyPress.
KeyDown event handler
This event handler is executed when a key is pressed in TextBox. I have used this event handler to detect whether Shift key is pressed and if the key code detected is 16 then the variable is set to true.
KeyUp event handler
This event handler is executed when a key is released in TextBox. I have used this event handler to detect whether Shift key is released and if the key code detected is 16 then the variable is set to false.
This event handler also keeps track of the Caps Lock key. When the key code 20 is detected based on whether Caps Lock key was initially ON or OFF the error message is shown to the user.
KeyPress event handler
This event handler is executed when a key is pressed in TextBox. This event handler does the actual task of detecting whether Caps Lock key is ON or OFF. It first checks whether it gets key code of capital (upper case) alphabets i.e. 65 (A) to 90 (Z). If it gets then it checks whether Shift key is pressed.
If it finds that a Shift key is pressed then the case is fine and no error is displayed. But if the Shift key is not pressed then it is a clear sign that the Caps Lock key is ON and hence the error message is displayed.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#error
{
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var isShiftPressed = false;
var isCapsOn = null;
$("#txtName").bind("keydown", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = true;
}
});
$("#txtName").bind("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = false;
}
if (keyCode == 20) {
if (isCapsOn == true) {
isCapsOn = false;
$("#error").hide();
} else if (isCapsOn == false) {
isCapsOn = true;
$("#error").show();
}
}
});
$("#txtName").bind("keypress", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
$("#error").show();
} else {
$("#error").hide();
}
});
});
</script>
</head>
<body>
<form action="">
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
</body>
</html>
![Detect Caps Lock key is ON or OFF using JavaScript and jQuery]()
Demo
Downloads
