Check and display warning message if caps lock key is on using javascript

IntroductionIn 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. 

Javascript to check and display message if caps lock key is on

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

        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";
        <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>

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

As you can see we are calling this method on the keyup event and the onclick event for the  password field. So whenever you try to enter in the password field it will first check whether your keyboard's caps lock key is on or not. It will display warning message if it is on.

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.
Next Post »

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..