jQuery Keyz Plugin

Written by

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

14 Responses to “jQuery Keyz Plugin”

  3. tuxsbro

    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.

  7. Esben Boye-Jacobsen

    Great plugin, but is it possible to unbind the handlers again? I’m using a custom popup and wants to disable up/down arrows while it is active and then re-enable them when the pop up closes.

  8. BinaryKitten

    Hi Esben, Thanks for your message.

    I would personally use a flag and then check that flag during the keyevent.

  9. Carlos

    Access to the next field by pressing Enter:

    $(“input, select”).not($(“:button”)).keyz({
    “enter”: function(ctl, sft, alt, event) {
    var campos = $(this).parents(‘form:eq(0),body’).find(‘input,textarea,select’)
    var indice = campos.index(this)
    if ( indice > -1 && ( indice + 1 ) < campos.length ) {
    campos.eq( indice + 1 ).focus()
    }
    return false
    }
    })

  10. BinaryKitten

    just reading your code and it’s a bit messy.

    $(“input, select”).not(“:button”).keyz({
    “enter”: function(ctl, sft, alt, event) {
    var campos = $(this).next(‘input,textarea,select’);
    if (campos.length > 0) {
    campos.eq(0).focus();
    }
    return false;
    }
    });

    remember your semi colons! also remember where the element is

  13. BinaryKitten

    Unfortunately it’s not as simple to directly map that. It could be possible to map this through with a modification but not going to be able to work on this for a while.

×

Comments are closed.