Saturday, February 28, 2015

How to Detect Caps Lock key is ON or OFF using jQuery

Posted by Gnani Palepu  |  No comments


 How to Detect Caps Lock key is ON or OFF using jQuery  
 <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>  

3:30 AM Share:

0 comments:

Get updates in your email box
Complete the form below, and we'll send you the best coupons.

Deliver via FeedBurner
Proudly Powered by Blogger.
back to top