Usando atajos de teclado en JavaScript

Jun 20, 2009 Comments Off by alfredojv

Lo primero que debemos tomar en cuenta a la hora de implementar atajos de teclado en una aplicación Web es no redefinir los atajos por defecto del navegador o sistema operativo, ya que se pudiera dar el caso de que el usuario intente hacer una acción común y la aplicación web lo interprete de otra manera, por ejemplo: Imaginemos que el usuario quiere cerrar la pestaña y presiona Ctrl+W, pero tu definiste Ctrl+W para otra acción dentro de la aplicación, el usuario verá su intento frustrado por querer cerrar la pestaña.

Como puedes saber, Javascript tiene muchos “escuchadores de eventos”. Para los atajos del teclado usaremos onkeyup, el cual permite efectuar una acción cuando una tecla es presionada. Entonces, solo tenemos que comparar el valor del código de teclado retornado con nuestros atajos de teclado.

Los códigos de teclado consisten en 2 o 3 numeros, cada tecla tiene su propio código (vea la lista completa al final).

EJEMPLOS

En el siguiente ejemplo vamos a ejecutar una acción si la tecla combinación de teclas Ctrl+S es presionada:

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         alert('Guardando...!');
         return false;
    }
}

Ahora veamos el mismo ejemplo, pero utilizando jQuery:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
        alert('guardando... Con jQuery');
 	return false;
 }
});

En estos ejemplos, empezamos verificando si la tecla Ctrl fue presionada, Si fue presionada, el valor inicial de la variable isCtrl será “true“. si las teclas son liberadas, a isCtrl se le asignará “false” de nuevo.

Una vez hecho esto, tenemos que verificar si la segunda tecla presionada es S, como nuestro atajo consiste en una combinación de teclas, también debemos verificar si la variable isCtrl es “true“.

Si las dos teclas fueron presionadas, mostraremos una alerta para mostrar un mensaje, por supuesto, en una aplicación real, podemos agregarle más funcionalidad.

Referencia de códigos

Key	Keyboard code
Backspace	8
Tab	9
Enter	13
Shift	16
Ctrl	17
Alt	18
Pause	19
Capslock	20
Esc	27
Page up	33
Page down	34
End	35
Home	36
Left arrow	37
Up arrow	38
Right arrow	39
Down arrow	40
Insert	45
Delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
0 (numpad)	96
1 (numpad)	97
2 (numpad)	98
3 (numpad)	99
4 (numpad)	100
5 (numpad)	101
6 (numpad)	102
7 (numpad)	103
8 (numpad)	104
9 (numpad)	105
*	106
+	107
-	109
.	110
/	111
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123
=	187
Coma	188
Slash /	191
Backslash \	220