Muestra event.key, event.code, keyCode y event.location de cualquier tecla Estado de Ctrl, Mayús, Alt y Meta, además de la repetición Sentencia if de JavaScript lista para copiar con la tecla pulsada Historial de las últimas teclas Evita el desplazamiento con Espacio y flechas mientras pruebas

Probador de keycode JavaScript - event.key, event.code y keyCode

event.key frente a event.code y keyCode

Cada pulsación en el navegador dispara un KeyboardEvent con varias propiedades. event.key es el valor que produce la tecla, como "a", "A", "Enter" o "ArrowUp", y sigue la distribución del teclado y el estado de Mayús. event.code describe la tecla física, como "KeyA" o "Digit1", así que no cambia entre teclados QWERTY, AZERTY o Dvorak. keyCode y which son códigos numéricos antiguos, obsoletos e incoherentes entre navegadores y distribuciones. El código moderno debe usar event.key para texto y atajos, y event.code cuando importa la posición, como los controles WASD de los juegos.

Funciones

• Muestra event.key, event.code, keyCode y event.location de cualquier tecla
• Estado de Ctrl, Mayús, Alt y Meta, además de la repetición
• Sentencia if de JavaScript lista para copiar con la tecla pulsada
• Historial de las últimas teclas
• Evita el desplazamiento con Espacio y flechas mientras pruebas

Privado por diseño

Los eventos de teclado se leen solo en esta página, en tu navegador. Nada de lo que pulsas se registra ni se envía.

Sin keylogger, 100% en el cliente.

Cómo usar: Probador de teclas

1
Haz clic en cualquier parte de la página para que tenga el foco y pulsa una tecla. En el móvil, toca el campo para abrir el teclado en pantalla.
2
Lee el valor grande: event.key. Debajo aparecen event.code y el antiguo keyCode.
3
Revisa las tarjetas para ver la posición de la tecla (Mayús izquierda o derecha, teclado numérico) y los modificadores pulsados, y copia cualquier valor con un clic.
4
Copia la sentencia if generada en tu manejador keydown. El historial muestra las últimas teclas para comparar combinaciones.

Ejemplos prácticos

Atajos de teclado

Para una búsqueda con Ctrl+K o Cmd+K, pulsa la combinación y usa event.key === "k" con event.ctrlKey || event.metaKey, que funciona en Windows y macOS.

Controles de juegos

Usa event.code ("KeyW", "KeyA", "KeyS", "KeyD") para que las teclas de movimiento sigan en el mismo sitio en AZERTY y otras distribuciones, donde event.key sería "z" o "q".

Enviar con Intro

Comprueba event.key === "Enter" y !event.shiftKey en un campo de chat para enviar con Intro y añadir una línea nueva con Mayús+Intro.

Teclado numérico y teclas de un lado

Distingue el Intro del teclado numérico (location 3) del Intro principal, o la Mayús izquierda de la derecha (location 1 y 2) cuando la app lo necesite.

Preguntas frecuentes

¿Uso event.key o event.code?+

Usa event.key para todo lo ligado al carácter, como atajos con letras, entrada de texto, Escape o Intro. Usa event.code cuando importa la posición física, como en juegos o atajos independientes de la distribución.

¿Por qué keyCode está obsoleto?+

Los valores de keyCode nunca se estandarizaron: cambian entre navegadores, distribuciones de teclado y entre keydown y keypress. El estándar KeyboardEvent los sustituyó por key y code, que admiten todos los navegadores modernos.

¿Por qué el teclado del móvil da "Unidentified" o 229?+

Los teclados en pantalla suelen enviar eventos de composición en lugar de códigos reales, sobre todo con autocorrección o IME. En móvil, escucha los eventos input o beforeinput para el texto.

¿Por qué algunos atajos no llegan a la página?+

El navegador o el sistema operativo gestionan antes algunas combinaciones, como Ctrl+W, Ctrl+T, Cmd+Q o Alt+Tab, así que una web no puede capturarlas ni bloquearlas.