jQuery Keyz Plugin

the purpose of this plugin is to easily facilitate the end user to create and hook keypresses for their own use.

Usage

It's as easy as these steps:

  1. Include jquery - either from CDN or local source
  2. Include jquery.keyz.js
  3. call the following within your document ready or after the item exists
$('selector').keyz({"enter":function(ctl,sft,alt,event) { alert('you pressed enter!'); }});
this will hook the enter key and raise an alert when pressed. If you want to cancel the key either return false from the function or set the value to false like so:
$('selector').keyz({
	"enter": function(ctl,sft,alt,event) { 
		return false; 
	}
});
OR
$('selector').keyz({
	"enter":false
});

Demo

Select the text field below and press a key.
Please note that even though the plugin supports all the keys listed below, the demo only hooks the enter,the F keys,tab and the windows keys. All the rest get processed via the default function which returns just the keycode.

Show/Hide Demo Code
 $('#area')
                .focusin(function() { $(this).addClass('redborder');})
                .focusout(function() {$(this).removeClass('redborder'); })
                . keyz({
                        'enter': function(ctl,sft,alt) {
                    $('<span />', {text: 'enter pressed'}).insertAfter(this).prepend('<br />');
                    return false;
                },
                "f1 f2 f3 f4 f5 f6 f7 f8 f9 f10 f11 f12 ": function() {
                    $('<span />', {text: 'F Key pressed'}).insertAfter(this).prepend('<br />');
                    return false;
                },
                'tab':function(ctl,sft,alt) {
                  $('<span />', {text: 'tab pressed'}).insertAfter(this).prepend('<br />');
                    return false;
                },
                'windows': function() {
                    $('<span />', {text: 'Windows key pressed'}).insertAfter(this).prepend('<br />');
                    return false;
                },
                'default' : function(code,ctl,sft,alt) {
                         $('<span />', {text: 'key with key code ' + code + ' was pressed'}).insertAfter(this).prepend('<br />');
                        return true;
                }
            });
	

Supported Keys