La locura del JavaScript: Eventos de teclado
Escrito por Alex Barros Trabajar en JavaScript ha tenido siempre una gran dificultad, y es que se trata de un lenguaje no estándar, interpretado por el cliente. Esto provoca desigualdades en los resultados, dependiendo sobretodo de los distintos navegadores, y sus respectivas versiones.
En el caso de los eventos de teclado este desmadre tiene un especial énfasis, y viene a demostrarse en este documento (en inglés) que paso a resumiros.
Eventos keyup keydown y keypress
Estos eventos son disparados en momentos distintos, dependiendo del navegador. Por ejemplo el mantener pulsada la tecla “Alt”, o el pulsar un caracter durante varios segundos, producen resultados distintos en cuanto al disparo de eventos, en cada navegador.
Interpretación de la tecla pulsada
Llegados al punto de que el usuario ha pulsado una tecla, querremos saber cuál de ellas ha pulsado. Pues el resultado también difiere entre navegadores (como era de esperar).
Para complicarnos la vida a los programadores, la codificación es distinta entre los principales navegadores. Aúnque en los caracteres normales (numeros y letras) hay una cierta uniformidad, la diferenciación del lugar donde se pulsan los números (hay dos series de números en un teclado normal), y la mayoría de los signos, adquieren claves distintas que los identifican.
Echa un vistazo a la tabla de códigos más abajo.
Tablas clarificadoras
| Navegador | Eventos enviados cuando se pulsan teclas modificadoras (Alt, Ctrl, etc) |
| Gecko Internet Explorer |
keydown keyup |
| Opera Konqueror |
keydown keypress keyup |
| Safari iCab |
ningún evento |
| Navegador | Eventos lanzados en cada autorepetición |
| Gecko (Linux) Gecko (Macintosh) Safari (Macintosh) Konqueror Opera |
sólo keypress |
| Internet Explorer Gecko (Windows) Safari (Windows) |
keydown keypress |
| iCab | keyup keydown keypress |
| Tecla | Mozilla | Internet Explorer | Opera | códigos pseudo ASCII |
|---|---|---|---|---|
| Teclas alfabéticas | Código ASCII de la letra en mayúscula | |||
| [ Espacio ] | 32 | 32 | 32 | 32 |
| [ Enter ] | 13 | 13 | 13 | 13 |
| [ Tabulador ] | 9 | 9 | 9 | 9 |
| [ Retroceder ] | 8 | 8 | 8 | 8 |
| [ Shift ] | 16 | 16 | 16 | 16 |
| [ Control ] | 17 | 17 | 17 | 17 |
| [ Alt ] | 18 | 18 | 18 | 18 |
| izquierda | 37 | 37 | 37 | 37 |
| arriba | 38 | 38 | 38 | 38 |
| derecha | 39 | 39 | 39 | 39 |
| abajo | 40 | 40 | 40 | 40 |
| Números en el teclado | Código ASCII del número (48 más el número), aúnque esté pulsado un modificador | Código ASCII del caracter que será enviado. | ||
| [ ; : ] | 59 | 186 | 59 | 59 (unshifted) o 58 (shifted) |
| [ = + ] | 61 | 187 | 61 | 61 (unshifted) o 43 (shifted) |
| [ , < ] | 188 | 188 | 44 | 44 (unshifted) o 60 (shifted) |
| [ - _ ] | 109 | 189 | 45 | 45 (unshifted) o 95 (shifted) |
| [ . > ] | 190 | 190 | 46 | 46 (unshifted) o 62 (shifted) |
| [ / ? ] | 191 | 191 | 47 | 47 (unshifted) o 63 (shifted) |
| [ ` ~ ] | 192 | 192 | 126 | 126 (unshifted) o 96 (shifted) |
| [ \ | ] | 220 | 220 | 92 | 92 (unshifted) o 124 (shifted) |
| [ ' " ] | 222 | 222 | 39 | 39 (unshifted) o 34 (shifted) |
| Números (teclado separado) | 96 más número | 48 más número (ASCII) | ||
Recomiendo leer la fuente original (inglés).
Categorias: Código, JavaScript, Web |



[...] Barros de Boozox, se ha currado un post explicativo en el que comprenderemos como funcionan y como dominar los eventos de teclado en Javascript. Sin duda, una forma de enriquecer nuestra aplicación es dotarla de una interface con capacidad [...]
Noviembre
14:20 pollaki Ha dicho:
wow!! muy buen tutorial.. 10 puntos!!
Noviembre
18:50 Alex Barros Ha dicho:
Muchas gracias, pollaki
Noviembre
20:38 vengador Ha dicho:
Muchas gracias por estas aclaraciones maestro
Febrero
17:50 RAUL Ha dicho:
bueno muchas gracias por esto pero si por ejemplo quiero q el evento se ejecute cuando se oprima determinada tecla en q parte debo pasar este argumento
MUCHAS GRACIAS