What's the most robust way of creating a global keyboard shortcut handler for a Web application using JavaScript ie 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 eg 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!
Just thought I'd throw another into the mix. I recently released a library called Mousetrap. Check it out at http://craig.is/killing/mice
The HotKey library available in the LivePipe controls package works with Prototype and is IE compatible.
JimmyP posted this as a comment, but it deserves to be an answer for voting purposes.
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.
There is also new JavaScript library called jwerty , it's easy to use and doesn't rely on jQuery.
I recommend having a look at Keystrokes . It makes this sort of thing extremely easy.
import { bindKey, bindKeyCombo } from '@rwh/keystrokes'
bindKey('a', () =>
console.log('You\'re pressing "a"'))
bindKeyCombo('ctrl > y, r', () =>
console.log('You pressed "ctrl" then "y", released both, and are pressing "r"'))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.