coge la información y corre

La locura del JavaScript: Eventos de teclado

13 de noviembre del 2007 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 |

Te regalamos 1Gb de amor por cada comentario que escribas!

Hay 9 comentarios, pero nos falta el tuyo

Los eventos de teclado en Javascript | aNieto2K Ha dicho:

[...] 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 [...]

pollaki Ha dicho:

wow!! muy buen tutorial.. 10 puntos!!

Alex Barros Ha dicho:

Muchas gracias, pollaki

vengador Ha dicho:

Muchas gracias por estas aclaraciones maestro ;)

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

Argento Ha dicho:

no es lo q busco.Necesito todos los codigos

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….

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

pamela Ha dicho:

Bogard: Yo tengo ese problema, en firefox no tengo forma de diferenciar los caracteres que mencionas. Encontraste alguna solucion?

del.icio.us meneame.net RSS

Search:

Bicivalencia Localiza las estaciones de Valenbisi, servicio público de bicicletas en Valencia, España. Ver más Gpsia Descubre y comparte rutas por todo el mundo, tomadas con GPS. Ver más Imaset Edita tus imágenes de Wordpress con este sencillo plugin. Ver más

¡Mi música es tuya!

Digo yo que...

Mis fotos de Flickr

Entradas recientes

Meta:

Respeta el copyleft

,