about

Updated Jan 06, 2008 by Afro.Systems
Labels:	Featured, Phase-Support, Phase-Implementation, Phase-Design

about

jQuery.hotkeys is a plugin that let you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It is based on a library shortcut.js written by Binny V A.

The syntax is as follows:

$.hotkeys.add(<key>,<options>, <handler>);
$.hotkeys.remove(<key>, <options>);

$.hotkeys.add('Ctrl+a', {target:'div.select', type: 'keyup'}, function(){/*DO YOUR DUTY*/});
$.hotkeys.remove('Ctrl+a', {target: 'div.select'});

Or you can use default options as:

$.hotkeys.add(<key>, <handler>)
$.hotkeys.remove(<key>)

i.e.
$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/});
$.hotkeys.remove('Ctrl+a');

The default options are:

{type: 'keydown', propagate: false, disableInInput: false, target: jQuery('html')[0]}

jQuery Compatibility

Tested with jQuery 1.1.3, 1.1.4 and 1.2.1

I would be glad if anyone can run the test in other environments.

Note

Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as Ctrl-t for new tab, or Ctrl-a for selecting all text. You can always bubble them up to the browser by using option propgate:true.

Others, (IE) either let you handle built-in short cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will not pass those events to the DOM at all.

So, if you add Ctrl-Q or Alt-F4 and your Safari/Opera window is closed don't be surprised.

Current Version is: beta 0.0.5

Comment by gianiaz, Feb 04, 2008

There's a way to manage Ctrl+click? Thank you

Comment by buchholz.bastian, Feb 10, 2008

What about numbers (0-9)?

Comment by kevinashworth, Feb 11, 2008

@buchholz.bastian For numbers, I see the expected behavior with the keys above QWERTY, but the number pad on the right of my keyboard doesn't work right. Instead, those keys trigger a-i for 1-9, and 0 does nothing. When numlock is off, they trigger arrow, home, etc.

Comment by kevinashworth, Feb 11, 2008

Great code! One question, what about combining accelerator keys? (Shift+Crtl+A, Alt+Shift+K, etc.)

Comment by kevinashworth, Feb 11, 2008

Answering my own question, Ctrl+Shift+, etc. all seem to work for me now. They didn't when I first tried it ....

Comment by kevinashworth, Feb 19, 2008

I'm having troubles in IE only (works in Safari, Firefox):

I test for $(this).attr("onclick"), and if so add function () {$(this).click();}

Works great in Firefox and follows the preexisting onclick javascript, but doesn't in IE. Anybody else seeing this?

Comment by jamiro.xmg, Mar 06, 2008

can this plugin help with manage "Shift+click"?? it's need for multyple selection in list (select some item set, how it's works in windows).

thx.

Comment by swamyveera, Mar 14, 2008

Works great, except that, if i have the focus in a text box, i get an error saying Error: that.allelement? has no properties Source File: scripts/jquery.hotkeys.js Line: 78 Am i doing something wrong? Is it possible to get over this? Thanks

Comment by pauldemott, Apr 13, 2008

Works great. Can't use the backspace key without going back a page though (firefox/win). Works in the demo, just not on my screen.. I must be missing sthg.

Comment by mibfire, May 14, 2008

Hi!

How can i make a toggle effect? For example. Shift+1 -> div->display: none; shift+1 again div->display: block;

Comment by willezumleben, May 25, 2008

Hi! For the number pad, I temporary fixed this problem adding the next code in the variable: 'this.special_keys' in the jquery.hotkeys.js

this.special_keys = {......., 96:'n0', 97:'n1', 98:'n2', 99:'n3', 100:'n4',101:'n5',102:'n6',103:'n7',104:'n8',105:'n9',........};

the keycodes 96 to 105 are the number pad keycodes. For use this solution,

jQuery.hotkeys.add('n0',function (){ /YOUR CODE/}); //For 0 in the number pad. jQuery.hotkeys.add('n1',function (){ /YOUR CODE/}); //For 1 in the number pad.

It works in my Iceweasel (Firefox). I hope it will help someone.

Comment by rafudu, Jun 25, 2008

Hu! I've implemented Command key support for mac. I don't think that people would use combinations like "Command+a" but today the plugin is "stealing" the command key (if I bind "C", then Command+C stops working.

Hope it helps: Lines 65:74

var code = event.which,
                type = event.type,
                character = String.fromCharCode(code).toLowerCase(),
                special = that.special_keys[code],
                shift = event.shiftKey,
                ctrl = event.ctrlKey,
                alt= event.altKey,
		cmd= e.metaKey,
                propagate = true, // default behaivour
                mapPoint = null;

Line 86:

            if(!shift && !ctrl && !alt && !cmd) { // No Modifiers

Line 95:

         if(cmd) modif += 'command+';

About

jQuery Compatibility

Browser support

Live Demo

Note

Current Version is: beta 0.0.5