Take the 2-minute tour ×

Basically, I'm using jQuery Hotkeys plugin by Mr Resig to capture and handle shortcuts like ctrl+o etc...

OK, maybe I don't uderstand the concept, but I was under the impression that a ctrl+o triggered anywhere inside the document will be captured by a document hotkey handler.

For example, the following code works in general...

jQuery(document).bind('keydown', 'ctrl+o', fn);

However, it fails miserably if the user triggers the hotkey when inside an input box.

It only works if I do the following:

jQuery('body, input').bind('keydown', 'ctrl+o', fn);

Which is pretty bad for my health since it involves binding the damn handler each time a new input box is added to the DOM. Worse still, I have no idea what to bind to in the case of complex widgets like CodeMirror.

Dunno if my problem makes sense, perhaps I'm using the wrong approach? I also tried binding to the following objects, but it didn't work: window, document, body, div[contains the whole page]

NB: You can try it out here.

share|improve this question
maybe you can use the on() here? so it'll work with every input ever added. Or am I missing something? –  Rene Pot May 1 '12 at 18:27
@Topener I don't want to just bind to all current inputs, but any future ones as well. The beauty of adding events this way is that you don't need global variables to contain your event handling functions, you just do it once when needed. –  Christian May 1 '12 at 18:30
But the point here isn't about me adding the events, but rather the hotkey functionality should be doing it itself. I mean, that's the point of a hotkey....pressing ctrl+s in Netbeans editor produces the same effect of doing it inside netbeans project listing (as an example). –  Christian May 1 '12 at 18:30
Something like jQuery('body').bind(...) and jQuery('body').children().bind(...) ? –  Irvin Dominin aka Edward May 1 '12 at 18:36
@Edward Perhaps it's too difficult to grasp, but here goes: .children() or any other jQuery selector works over existing elements, not any that might be added in the future. I need global hotkeys, not binding events everywhere each time the DOM is changed. –  Christian May 1 '12 at 18:41
show 4 more comments

2 Answers

up vote 5 down vote accepted

This is actually intended functionality of the plugin:

// Don't fire in text-accepting inputs that we didn't directly bind to
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
    event.target.type === "text") ) {
share|improve this answer
Well, to be honest, I don't know how to fix my issue without changing that code :( –  Christian May 1 '12 at 18:43
I suppose I could pass on an option to disable the feature...then submit a patch to Resig's... –  Christian May 1 '12 at 18:46
Yeah, I don't see a way around it without modifying the plugin in some way. –  James Montagne May 1 '12 at 18:48
Well, thanks for pointing it out. Don't know why it didn't pass through my mind to check the plugin code in the first place... –  Christian May 1 '12 at 18:52
I am pleased to announce that this also solved my issues with CodeMirror. –  Christian May 1 '12 at 18:55
add comment

Yes, JqueryHotkeys failed miserably if the user triggers the hotkey when inside an input box.

Alternatively, when I browsed I found out shortcut.js, which provides similar functionality as that of Jquery-Hotkeys.

Importantly it also has an option to enable or disable the "user defined shortcut function" when inside an input box.

share|improve this answer
add comment

Your Answer


