jQuery CAPS lock detection plugin

• Tweet

• Tweet

Hi Guys,

Well while I was working on some RnD stuff in past few days I came across this requirement for one of my projects. Now I deemed it to be useful to share thus I am writing this post today.

Problem

Give me a tooltip alert when user is typing a password and their CAPS lock is in ON state.

Solution

Well what better than just writing a little code snippet. In jQuery we call it extension or plugin function and then I can share it too

First of all thanks to Jason who have developed such an awesome tooltip plugin for jQuery. You can get tipsy from https://github.com/jaz303/tipsy/

Demo

Demo is available from my site demo pill. Some times I just laugh why I chose this name

http://jaspreetchahal.org/examples/jccapsalert/

Download

Advertisement

Donations

Code

You can get the latest updates from either

Google Code: http://code.google.com/p/jquery-capslock-detector/

Or

GitHub: https://github.com/jaschahal/jc-capslock-detection

Main plugin function is given below and you can read documentation on tipsy from the link above.

jQuery.fn.CapsLockAlert = function(settings) {
	settings = jQuery.extend({
		    delayIn: 0,      
		    delayOut: 0,     
		    fade: false,     
		    fallback: 'WARNING: CAPS Lock is on',    
		    gravity: 'w',    
		    html: false,     
		    live: false,     
		    offset: 10,       
		    opacity: 0.8,    
		    title: 'title',  
		    trigger: 'manual', 
		    stylize:true
		},settings);
	return this.each(function() {
		jQuery(this).keypress(function(e) {
              	jQuery(this).tipsy(settings);
			    var is_shift_pressed = false;
			    if (e.shiftKey) {
			      is_shift_pressed = e.shiftKey;
			    } 
			    else if (e.modifiers) {
			      is_shift_pressed = !!(e.modifiers & 4);
			    }
			    if (((e.which >= 65 && e.which= 97 && e.which

Demo Markup

Demo password  <input type="password" id="password">

Usage

<script type="text/javascript">
        jQuery(document).ready(function(){       
              jQuery("#password").CapsLockAlert();
     });
 </script>

Screenshot

Conclusion

Well this is my solution. If you want to improve it you are more than welcome to make you own changes to it. Code is straight forward and is not complicated at all.

I hope you like this plugin.

Cheers,

Advertisement