Introduction: In this
article I am going to explain how to check and display warning message if caps
lock key of the keyboard is on using javascript/jquery.
In previous articles I have explained How to count and limit number of words in asp.net textbox or html textarea using jquery and Hide first / last or nth column of table before printing using jquery and Highlight asp.net or html textbox on mouse hover using jquery and Jquery to show hide password characters in asp.net textbox on checkbox check uncheck and Jquery to replace all spaces with underscores while typing in textbox
Description: While taking input from user we may
require to detect whether user has enabled caps lock or not. E.g. in password
field we must notify user whether his caps lock key is on or not because in
password field user cannot see what he is typing. He may enter password in
capital letter unintentionally.
So it is always suggested to notify user if his
caps lock is on. After that it is up to
the user whether he wants to continue with caps lock on or want to disable it.
Implementation: Let’s demonstrate by an example
<html>
<head>
<title></title>
<script>
function IsCapsLockOn(event) {
if (event.getModifierState("CapsLock"))
{ // If "caps lock" is pressed, display the warning text
document.getElementById("spnWarning").style.display = "block";
}
else {
document.getElementById("spnWarning").style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr><td>User Name:</td><td><input id="txtUsername" type="text"></td></tr>
<tr><td>Password: </td><td><input id="txtPassword" type="password" onclick="IsCapsLockOn(event)" onkeyup="IsCapsLockOn(event)"></td></tr>
<tr><td colspan="2"><span id="spnWarning" style='display:none;color:red'>WARNING! Caps lock is ON.</span></td></tr>
</table>
</body>
</html>
Explanation: We are checking whether caps lock key is on or not by using the keyboard event listener method getModifierState().This method returns true if the specified modifier key was pressed, or activated.
For more details of this method you can read from the link https://www.w3schools.com/jsref/event_key_getmodifierstate.asp
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..