jQuery hotkeys...not so global

Question

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.

maybe you can use the `on()` here? so it'll work with every input ever added. Or am I missing something? — Rene Pot, May 01 '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 01 '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 01 '12 at 18:30
Something like jQuery('body').bind(...) and jQuery('body').children().bind(...) ? — Irvin Dominin, May 01 '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 01 '12 at 18:41
@Topener My bad, seems you are right. So much for screwing up with parameters. :) — Christian, May 01 '12 at 23:01

score 6 · Accepted Answer · answered May 01 '12 at 18:40

6

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") ) {
    return;
}

answered May 01 '12 at 18:40

James Montagne

77,516
14
110
130

Well, to be honest, I don't know how to fix my issue without changing that code :( – Christian May 01 '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 01 '12 at 18:46
Yeah, I don't see a way around it without modifying the plugin in some way. – James Montagne May 01 '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 01 '12 at 18:52
2

**I am pleased to announce that this also solved my issues with CodeMirror.** – Christian May 01 '12 at 18:55
@Christian I know this is an old, old, **old** post, but how did it *solve* the issue for you? Did you fork the script, modify this and use your own version? I could ask a follow up question but it would probably be closed as a dupe! :) – bertieb Dec 17 '18 at 01:04

score 1 · Answer 2 · answered Jul 17 '12 at 13:59

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.

jQuery hotkeys...not so global

2 Answers2