Utilia
Categorías ▾
Idioma: es ▾

Buscador de códigos de teclas

Pulsa cualquier tecla y ve sus valores event.key, event.code, keyCode, which y location en JavaScript, con modificadores, historial y tabla completa.

Pulsa «Empezar a capturar teclas» o haz clic en el recuadro de abajo y luego pulsa cualquier tecla. Haz clic fuera del recuadro para devolver el teclado a la página.

event.key Pulsa una tecla keyCode – Tab, las flechas y los atajos también se capturan aquí.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Teclas de bloqueo activas
–
Modificadores
ctrlKey shiftKey altKey metaKey
Historial de teclas (la más reciente primero)
Historial de teclas (la más reciente primero)
EventokeycodekeyCodelocationModificadoresrepeat
Tabla de códigos de teclas (QWERTY de EE. UU.)

Tabla de códigos de teclas (QWERTY de EE. UU.)
keycodekeyCodelocationNota

los valores de key corresponden a una distribución de EE. UU. sin modificadores; otras distribuciones producen otros caracteres para el mismo code. keyCode y which están obsoletos, pero se siguen usando mucho.

Cómo obtener el código de una tecla

  1. Pulsa Empezar a capturar teclas o haz clic en el recuadro grande. Un borde de color indica que está escuchando.
  2. Pulsa cualquier tecla o atajo. La pantalla grande muestra el valor key y el keyCode heredado, y las tarjetas de debajo listan event.key, event.code, event.keyCode, event.which, event.location, event.repeat y las Teclas de bloqueo activas (Bloq Mayús, Bloq Num, AltGraph).
  3. Los indicadores de Modificadores se iluminan para ctrlKey, shiftKey, altKey y metaKey.
  4. Copia el Fragmento JavaScript para esta tecla. Con Comparar por eliges entre event.key, event.code o event.keyCode (obsoleto).
  5. Recorre el Historial de teclas (la más reciente primero) para comparar varias pulsaciones. Marca Registrar también los eventos keyup para ver también cuándo se sueltan.
  6. Consulta o filtra la Tabla de códigos de teclas (QWERTY de EE. UU.) cuando necesites un valor sin pulsar la tecla.

Mientras el recuadro tiene el foco, la acción predeterminada de cada tecla se bloquea, de modo que Tab, las flechas, Retroceso o Ctrl+S se capturan en lugar de mover el foco o abrir un diálogo. Haz clic en cualquier punto fuera del recuadro para devolver el teclado a la página. Algunos atajos los gestiona el sistema operativo antes de que el navegador los vea (Alt+Tab, Ctrl+Alt+Supr, Cmd+Tab y a menudo Impr Pant), así que ninguna página web puede leerlos.

key, code o keyCode: ¿cuál conviene usar?

Un KeyboardEvent lleva varios valores que responden a preguntas distintas:

Propiedad Qué indica Ejemplo (la tecla A en AZERTY)
key El carácter o la tecla con nombre que se produce, tras aplicar distribución y modificadores "a", "A" con Mayús
code La posición física de la tecla, independiente de la distribución "KeyQ"
keyCode / which Un número heredado, normalmente el código ASCII de la letra en mayúscula 65
location 0 estándar, 1 izquierda, 2 derecha, 3 teclado numérico 0

Usa key cuando importa el significado: Intro para enviar, Escape para cerrar, «?» para abrir la ayuda. Usa code para juegos y atajos que dependen de la posición de las teclas, como el movimiento con WASD, que debe quedar en el mismo sitio en un teclado AZERTY francés o QWERTZ alemán. Evita keyCode y which en código nuevo: están obsoletos, sus valores para los signos de puntuación varían entre navegadores (Firefox envía 59 para el punto y coma donde Chrome envía 186) y no distinguen entre el Mayús izquierdo y el derecho ni entre las dos teclas Intro. Aun así conviene conocerlos si mantienes código antiguo, y por eso esta herramienta los muestra.

Sobre el fragmento de código

El listener generado compara exactamente la tecla que pulsaste, incluidos Ctrl, Alt y Meta. Para los caracteres imprimibles comparados por key, se omite Mayús porque ya forma parte del valor: Mayús+1 da "!" en una distribución de EE. UU. Cuando pulsas un modificador solo, el fragmento no repite su indicador. Recuerda que metaKey es la tecla Cmd en un Mac y la tecla Windows en un PC, así que los atajos multiplataforma suelen comprobar event.ctrlKey || event.metaKey.

Preguntas frecuentes

¿Por qué keyCode muestra el mismo número para caracteres distintos?

keyCode identifica la tecla, no el carácter. El dígito 1 y «!» comparten el 49, y «a» y «A» comparten el 65. Lee key para obtener el carácter real.

¿Por qué mi tecla A de un teclado AZERTY aparece como KeyQ?

code nombra las teclas según su posición en un teclado QWERTY de EE. UU. La tecla marcada con A en un teclado francés está donde la Q en uno estadounidense, así que su code es KeyQ mientras que su key es «a».

¿Qué significa «Dead» en event.key?

Es una tecla muerta, como la tilde ´ o la diéresis ¨ en un teclado español, que espera a la siguiente tecla para formar una letra acentuada. El carácter final llega con el siguiente evento de tecla o con el evento input de un campo de texto.

¿Por qué event.repeat indica «sí»?

Estás manteniendo pulsada la tecla y el sistema operativo envía repeticiones automáticas. Comprueba event.repeat para ignorarlas, por ejemplo para ejecutar un atajo una sola vez.

¿Se graba o se envía algo de lo que tecleo?

No. Esta página lee los eventos de teclado en tu navegador y nunca los envía a ningún sitio. El historial desaparece al recargar o salir de la página.

Herramientas relacionadas