Skip to main content
knackforge blog knowledge base

To check Caps lock is on/off status in jQuery

I'm sure that this script will help you in some of your projects that needs a username and password.
Sometimes when we want access to a secure page that asks for a username and password and we submit the information but we didn't know that the password was submitted in upper case, we get an error.
 
Solution: 
jQuery('#username').keypress(function(e) {
  var s = String.fromCharCode( e.which );
  if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
    jQuery('#capslockdiv').show();
  }
  else {
    jQuery('#capslockdiv').hide();
  }
});
jQuery('#password').keypress(function(e) {
  var s = String.fromCharCode( e.which );
  if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
    jQuery('#capslockdiv').show();
  }
  else { 
    jQuery('#capslockdiv').hide();
  }
});

Sample HTML code

<div>
  <label class="username">Email
    <input id="username" name="username" value="" type="text" autocomplete="on">
  </label>
  <label class="password" value="Password">Password
    <input id="password" name="password" value="" type="password">
  </label>
  <div id="capslockdiv" style="display: none;">
</div>

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.