Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery hotkeys...not so global

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.

like image 984
Christian Avatar asked May 01 '12 18:05

Christian


2 Answers

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;
}
like image 192
James Montagne Avatar answered Nov 16 '22 02:11

James Montagne


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.

like image 30
Yothesh Avatar answered Nov 16 '22 03:11

Yothesh