Skip to content


jQuery Keyz Plugin

The purpose of this plugin is to easily facilitate the end user to create and hook key presses for their own use. Usually you would need to know what key links with which keycode etc.

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
});

You can either use the key names in singular or in a grouping like so:

$('selector').keyz({
"enter": function(ctl,sft,alt,event) {
/* single key */
return false;
},
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12": function(ctl,sft,alt,event) {
/* mapped to all F-Keys */
return false;
}
});

Download jquery.keyz.js here: Full Source && Google Closure Compiled version

Visit the demo page here: Full Source

Planned Features

  • support for keypress chains .. passing a sequence of keys and an event firing upon completion
  • support for all three key states – presently only triggers on key down – Added in 1.0.2
  • to add some duck punching to add the keyname to the event for the three standard events

Supported Keys

The keys listed below are the current ones supported by the plugin.
They also support the hyphenated name eg numpad-1 or in upper case like “F1″ or “f1″

  • enter
  • return
  • esc
  • escape
  • numerics
  • upper
  • lower
  • alphanumeric
  • tab
  • shift
  • alt
  • ctrl
  • f1
  • f2
  • f3
  • f4
  • f5
  • f6
  • f7
  • f8
  • f9
  • f10
  • f11
  • f12
  • caps
  • capslock
  • numlock
  • winflag
  • winkey
  • windows
  • scrolllock
  • left
  • up
  • right
  • down
  • volumeup
  • volumedown
  • menu
  • contextmenu
  • backspace
  • pause
  • break
  • pausebreak
  • pageup
  • pagedown
  • end
  • home
  • insert
  • del
  • delete
  • numpad0
  • numpad1
  • numpad2
  • numpad3
  • numpad4
  • numpad5
  • numpad6
  • numpad7
  • numpad8
  • numpad9
  • *
  • multiply
  • +
  • add
  • -
  • subtract
  • .
  • fullstop
  • decimal
  • /
  • divide
  • ;
  • semicolon

Posted in jQuery Plugins.

Tagged with , , , .


6 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Joseph Hinson says

    Very cool. Thanks for the plugin, I’m thinking of what I could use this for, and the list is growing quickly.

  2. BinaryKitten says

    Thanks.. also if you have any ideas of features to add, please do let me know

  3. tuxsbro says

    keypress chains:
    when someone types a specified string like “12345″ it fires a function that says “the user pressed 12345″ right? That’s useful, but it could be much more useful if you added support for a wildcard like “123*5″ which will fire a function that is passed the typed in string (among other things). A regex would be nice too. There is the problem of how far back to keep searching, so maybe you want some kind of space delimiter or something.

  4. BinaryKitten says

    Nice idea, will have to remember this and see what is possible later

Continuing the Discussion

  1. 10 Really Fresh and Cool jQuery Plugins to Spice Up Your Website or Blog | tripwire magazine linked to this post on Wednesday March 17th, 2010

    [...] jQuery Keyz Plugin [...]

  2. Best jQuery Plugins linked to this post on Friday April 30th, 2010

    [...] 13. jQuery Keyz Plugin [...]



Some HTML is OK

or, reply to this post via trackback.


Get Adobe Flash playerPlugin by wpburn.com wordpress themes