Hace unos días me plantee la posibilidad de añadir teclas rápidas al funcionamiento de la aplicación. Las teclas rápidas o también llamadas atajos de teclado (o «keyboard shortcuts» en inglés) nos permite realizar acciones pulsando una tecla o una combinación de teclas. Por ejemplo, habremos usado muchas veces Ctrl + g (o la variante inglés Ctrl + s) para grabar un documento, Ctrl + r para recargar la pantalla de nuestro navegador o, por ejemplo, todas las teclas rápidas de GMail. Lo que voy a explicar brevemente en este post es como conseguir algo parecido a lo que usa GMail.
El funcionamiento es realmente sencillo, este sería el código:
document.addEvent('keyup', function(e) {
var bg = e.target.get('tag');
if(bg == 'html' || bg == 'body') {
if(e.key == 'a') {
accion1();
}
else if(e.key == 's') {
accion2();
}
}
});
Lo único que le falta a este código son las funciones accion1() y accion2() que son las que se ejecutarán cuando pulsemos las teclas a y s respectivamente.
Este código añade un evento ‘keyup’, es decir, cuando se detecta que se ha pulsado una tecla y estamos levantando el dedo de la tecla. Este evento indaga a ver qué tecla se ha pulsado y en caso de ser una de las de la lista, ejecutará la función correspondiente.
La comprobación de que el objetivo de nuestra pulsación (e.target) sea ‘html’ o ‘body’ sirve para que no se haga esta comprobación cuando estamos en un elemento como un input, un textarea, etc. Es decir, tenemos que tener el foco en el documento. En la mayoría de los navegadores funcionaría simplemente con indicar ‘html’, pero, como siempre, Internet Explorer tiene que dar la nota y necesita que comprobemos sobre ‘body’.
Por último añadir que podemos obtener más información del evento:
e.code: el código de la tecla pulsada
e.control: true si la tecla Ctrl está pulsada
e.shift: true si la tecla Shift está pulsada
e.alt: true si la tecla Alt está pulsada
Y no sólo esto, también podemos trabajar con la rueda del ratón o el botón derecho del ratón
El resultado es realmente espectacular si tienes que trabajar con una aplicación en la que las teclas rápidas te hacen la vida más sencilla 🙂