Caps Lock Notification Plugin For jQuery - Caps-lock

File Size: 4.49 KB
Views Total: 2165
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Caps Lock Notification Plugin For jQuery - Caps-lock

Caps-lock is an extremely simple yet useful jQuery plugin that provides Caps lock notification for password fields. In this post, we're going to use Bootstrap Msg plugin to display an alert message when the visitor presses Caps Lock key.

How to use it:

1. Include the Bootstrap Msg plugin on your webpage. Make sure you first have jQuery and Bootstrap framework installed.

<link rel="stylesheet" href="bootstrap-msg-0.4.0.min.css">
<script src="bootstrap-msg-0.4.0.min.js"></script>

2. Caps lock check for password field.

$( "input[ type='password' ]" ).keypress( function(e) {
  var key_check = e.which;
  var isUp = ( key_check >= 65 && key_check <= 90 ) ? true : false;
  var isLow = ( key_check >= 97 && key_check <= 122 ) ? true : false;
  var isShift = ( e.shiftKey ) ? e.shiftKey : ( ( key_check == 16 ) ? true : false );
  if ( ( isUp && !isShift ) || ( isLow && isShift ) ) {
    capLock();
  };
});

3. If caps lock is on, show an alert.

Msg.show('Caps-lock is On!', 'warning', 5000);

This awesome jQuery plugin is developed by abhijeetyaduwanshi. For more Advanced Usages, please check the demo page or visit the official website.