Manejo de atajos de teclado robusto usando JavaScript

Question

¿Cuál es la forma más robusta de crear un manejador de atajo de teclado global para una aplicación web usando JavaScript, es decir qué evento (s) debo manejar ya qué controlador (es) del evento se debe adjuntar?

Quiero algo así como el sistema en Gmail que puede manejar atajos de teclas simples y también accesos directos con teclas modificadoras, p. Ctrl + B etc. El código tiene que funcionar en IE 6 así como también en navegadores modernos.

Tengo el marco de Prototype disponible para usar pero no jQuery, así que por favor, ¡no hay respuestas específicas de jQuery!

Answer 1

La biblioteca HotKey disponible en el paquete de controles LivePipe funciona con Prototype y es compatible con IE.

http://livepipe.net/extra/hotkey

Answer 2

Lo que haría sería adjuntar eventos KeyUp al document.body. Luego, en este controlador de eventos, utilizaría el método Element.fire para activar un evento personalizado. Aunque este paso es opcional, ayudará a desacoplar el controlador de eventos de la acción que se realizará, y puede usar el mismo controlador de eventos personalizados de decir un evento de clic de botón.

$(document.body).observe("keyup", function() { 
    if(/* key + modifier match */) { 
     $(document.body).fire("myapp:mycoolevent"); 
    } 
}); 

$(document.body).observe("myapp:mycoolevent", function() { 
    // Handle event. 
}); 

Más tarde, para unir el mismo evento a un clic de botón:

$(button).observe("click", function() { 
    $(document.body).fire("myapp:mycoolevent"); 
}); 

Por lo que el manejo de las teclas modificadoras se refiere, echa un vistazo a this resource (muy viejo, pero todavía se ve el caso) para obtener más ayuda .

Answer 3

JimmyP ha publicado esto como un comentario, pero merece ser una respuesta para fines de votación.

http://www.openjs.com/scripts/events/keyboard_shortcuts/

Answer 4

Hay también nueva biblioteca de JavaScript llamada jwerty, es fácil de usar y no se basa en jQuery.

Answer 5

Solo pensé en tirar otro en la mezcla. Recientemente lancé una biblioteca llamada Mousetrap. Compruébelo en http://craig.is/killing/mice