jQuery Keyz Plugin
February 24, 2010 in jQuery Plugins
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:
- Include jquery – either from CDN or local source
- Include jquery.keyz.js
- 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
Very cool. Thanks for the plugin, I’m thinking of what I could use this for, and the list is growing quickly.
Thanks.. also if you have any ideas of features to add, please do let me know
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.
Nice idea, will have to remember this and see what is possible later
[...] jQuery Keyz Plugin [...]
[...] 13. jQuery Keyz Plugin [...]
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.
Hi Esben, Thanks for your message.
I would personally use a flag and then check that flag during the keyevent.
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
}
})
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. jQuery Keyz Plugin [...]
Hello, excellent!. It is possible to do key sequences (example: ctrl+N). Thank you
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.
[...] 13. jQuery Keyz Plugin [...]