10

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.

9
  • 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, 2012 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, 2012 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, 2012 at 18:30
  • Something like jQuery('body').bind(...) and jQuery('body').children().bind(...) ? May 1, 2012 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, 2012 at 18:41

2 Answers 2

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;
}
6
  • Well, to be honest, I don't know how to fix my issue without changing that code :(
    – Christian
    May 1, 2012 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, 2012 at 18:46
  • Yeah, I don't see a way around it without modifying the plugin in some way. May 1, 2012 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, 2012 at 18:52
  • 2
    I am pleased to announce that this also solved my issues with CodeMirror.
    – Christian
    May 1, 2012 at 18:55
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.