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 |



Respeta el copyleft
[...] 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
Noviembre
21:59 Argento Ha dicho:
no es lo q busco.Necesito todos los codigos
Marzo
5:48 Enzo Ha dicho:
Bueno el Tutorial, pero la verdad cuando lo encontre pense de inmediato en codigo, como controlar estos eventos por codigo, desde q se disparan hasta q se entrega el Foco a otro control o se hace algo con ese evento, tener el control absoluto sobre dicho evento…..seria de mucha ayuda para quienes manejamos poco JavaScript, como yo, jejejeje….
Ojala encuentres el tiempo y la paciencia para explicar esto atravez de codigo, espero no pasarme de la raya con mi peticion y gracias….
Abril
18:40 Bogard Ha dicho:
Excelente documento, solo me gustaría aportar que en navegadores como mozilla eñ ascii de la tecla End (Fin) es 35 y el del # tambien es 35, esto mismo sucede para tecla de inicio 36, $, felcha a la izquierda y % que son 37 entre otros, como podemos diferenciar entre si se presiona la tecla de fin y el shift + 3, y para complicarlo un poco mas la tecla de flecha a la derecha es 39 igual que el ‘, y en este no se presiona shift, por que la respueta natural sería determinar qeu la techa de shift esta presionada pero no funcion para todos los casos