Inspired by John Resig's hotkeys, I created a version that uses the modern on, and uses an object rather than a string for the keys (which would be confused with a selector). It also uses my $.keymap codes.
It's written as a plugin to $.keymap.
Download the code.
See the demo.
Usage
Initialize it with $.keymap.hotkeys('keydown') (you can also use 'keyup' but that seems much less useful). This modifies the event handling code so that you can listen for specific keys or sequences of keys:
$('input').on('keydown', {keys: '^A'}, function() {alert('Control A was pressed')} );
The original $('input').on('keydown', function() {alert('A key was pressed')} ); is unchanged.
Only one handler per element/key is allowed; adding another handler replaces the old one. Remove it entirely with $('input').off('keydown', {keys: '^A'} );.
It handles selectors correctly (I think) but is subject to the same one handler per element rule:
$('body').on('keydown', {keys: '^A'}, function() {alert('Control A')} );
$('body').on('keydown', 'input', {keys: '^A'}, function() {alert('Control A was pressed in an input')} );
Would first attach the handler for <body> and keys ^A, then replace it with a handler that is only triggered when the target element is an <input> and the event bubbled up to the <body>.
Sequences of keystrokes are indicated by a space-delimited list:
$('body').on('keydown', {
keys: '{up} {up} {down} {down} {left} {right} {left} {right} b a'
},
function() {alert('Konami!')}
);
Listens for the Konami code.
Normally, when listening for a sequence, the keydown events that match are discarded. If you want them to be passed to other handlers, use
allowDefault:
$('body').on('keydown', {
keys: '{up} {up} {down} {down} {left} {right} {left} {right} b a',
allowDefault: true // the arrow keys will still work
},
function() {alert('Konami!')}
);
To prevent other handling on the final event of a sequence, use the usual preventDefault or return false in the handler.
Events
The plugin also triggers two other events: 'keymapprefix' when the event is the prefix of a valid sequence, and 'keymapcomplete' when a sequence is matched. Both are sent with an additional parameter indicating what keys were pressed so far (in $.keymap notation). So:
$('body').on('keymapprefix keymapcomplete', function(event, keys){
alert ('sequence pressed: '+keys);
})
