What's the most robust way of creating a global keyboard shortcut handler for a Web application using JavaScript i.e. which event(s) should I handle and what should the event handler(s) be attached to?
I want something like the system in Gmail which can handle both single keypress shortcuts and also shortcuts with modifier keys e.g. Ctrl + B etc. The code has to work in IE 6 as well as modern browsers.
I have the Prototype framework available to use but not jQuery, so please, no jQuery-specific answers!
-
What I would do is attach onKeyUp events to the document.body. Then, in this event handler, I would use the Element.fire method to fire a custom event. Though this step is optional, it will help in decoupling the event handler from the action to be performed, and you can use the same custom-event handler from say an button click event.
$(document.body).observe("keyup", function() { if(/* key + modifier match */) { $(document.body).fire("myapp:mycoolevent"); } }); $(document.body).observe("myapp:mycoolevent", function() { // Handle event. });Later, to bind the same event to a button click:
$(button).observe("click", function() { $(document.body).fire("myapp:mycoolevent"); });As far as handling modifier keys is concerned, check out this resource (very old, but still looks applicable) for more help.
eyelidlessness : Keyup seems problematic. At least on OS X (but I believe it's true on Windows and most Linux WMs as well), most key commands activate on keydown. This expectation (with proper checking) also enforces certain expectations on shortcuts: modifier keys must be first, only one printable key per shortcut. -
The HotKey library available in the LivePipe controls package works with Prototype and is IE compatible.
http://livepipe.net/extra/hotkey
John Topley : I'm going to accept your answer because this looks like exactly what I'm looking for and because there's lots of other interesting stuff on that site, so thanks!eyelidlessness : Be warned, HotKey apparently accepts combinations if unspecified modifiers are pressed (eg. specified ctrl + a, pressed ctrl + shift + a, the ctrl + a is detected).eyelidlessness : It would also be nice if it detected OS X and replaced ctrl with cmd/meta. -
JimmyP posted this as a comment, but it deserves to be an answer for voting purposes.
http://www.openjs.com/scripts/events/keyboard_shortcuts/
John Topley : I know, that's why I asked him why he hadn't posted it as an answer. Upvoted.eyelidlessness : I know, that's why I posted it as an answer. ;) And I posted it community wiki because it's not my points to earn.
0 comments:
Post a Comment