Skip to main content

Registrador de Eventos de Teclado.

Un panel de diagnóstico que muestra los eventos de teclado en bruto del navegador. Útil para desarrolladores que depuran manejadores de eventos o comprueban propiedades específicas de las teclas.

Controles del Registro

Eventos en Tiempo Real

EventoKeyCodeKeyCodeLocationModificadoresMarca de Tiempo
Aún no se ha registrado ningún evento de teclado. Enfoca el objetivo de captura y pulsa algunas teclas.

Comprueba esto antes de registrar

  • Enfoca el cuadro de capturaHaz clic en él o pulsa Tab primero — no se registra ningún evento hasta que tiene el foco.
  • Borra el registro entre pruebasReinicia el registro antes de cada tecla nueva para que las comprobaciones de eventos duplicados sigan siendo fáciles de leer.
  • Fíjate en las marcas de tiempoDos eventos keydown separados por milisegundos a partir de un solo toque apuntan a un switch con chatter, no a un error tuyo.

Cómo funciona el registrador de eventos

  1. 1

    Enfoca el área de captura. Haz clic en el cuadro de arriba o pulsa Tab para enfocarlo. El texto de estado cambia para mostrar que está escuchando eventos de teclado.

  2. 2

    Pulsa cualquier tecla. Cada evento keydown y keyup se registra con sus propiedades en bruto — key, code, keyCode, location, modificadores y marca de tiempo. La tabla se actualiza en tiempo real, con los eventos nuevos añadidos arriba del todo.

  3. 3

    Gestiona tu registro. Usa el botón "Borrar Registros" para reiniciar la tabla, o "Exportar como CSV" para descargar todos los eventos y analizarlos en una hoja de cálculo o una herramienta de depuración.

Entendiendo las propiedades de los eventos de teclado

key es el carácter real que produce la tecla (por ejemplo, "a", "A", "1"). Cambia según la distribución del teclado y si hay modificadores activos (Shift, Alt). En un teclado francés AZERTY, la tecla de letra más a la izquierda produce "a" en lugar de "q".

code es la tecla física, independiente de la distribución (por ejemplo, "KeyA", "Digit1", "Enter"). Pulsar la misma tecla física siempre devuelve el mismo code, sin importar la distribución ni los modificadores.

keyCode es un código numérico heredado (por ejemplo, 65 para A) de antes de las propiedades modernas key y code. Ahora está obsoleto porque era inconsistente entre navegadores y poco fiable para teclados internacionales y teclas especiales. Usa code o key en su lugar.

location distingue entre teclas duplicadas en tu teclado. Las teclas estándar reportan location 0; los modificadores izquierdos (Shift, Ctrl, Alt) reportan 1; los modificadores derechos reportan 2; las teclas del teclado numérico reportan 3. El registrador muestra esto con etiquetas más claras: "Estándar", "Izquierda (Mod)", "Derecha (Mod)", "Teclado Numérico".

Las banderas de modificadores son propiedades booleanas — ctrlKey, shiftKey, altKey, metaKey — que indican si se mantuvo pulsado Ctrl, Shift, Alt o Command/Windows durante el evento. Se combinan libremente: pulsar Ctrl+Shift+A pone tanto ctrlKey como shiftKey en true.

repeat es true cuando una tecla mantenida pulsada dispara eventos keydown repetidos (auto-repetición). El primer keydown tiene repeat: false; si mantienes la tecla pulsada, los keydown siguientes tienen repeat: true. Este registrador solo muestra keydown y keyup, así que puedes detectar teclas que se repiten fijándote en grupos de entradas idénticas.

Para quién es el registrador de eventos

Depurar manejadores de teclas

Los desarrolladores web que construyen interacciones de teclado personalizadas pueden ver exactamente qué eventos se disparan y en qué orden, e inspeccionar todas las propiedades del objeto del evento para asegurarse de que los manejadores responden correctamente a las teclas que pulsan sus usuarios.

Detectar chatter de teclas

Un switch que funciona mal a veces registra dos eventos keydown a partir de una sola pulsación (chatter). Observando las marcas de tiempo puedes detectar duplicados rápidos y rastrearlos hasta una única tecla física — una señal de desgaste del hardware o de un switch que necesita atención.

Identificar teclas desconocidas

¿Has encontrado una tecla en tu teclado con una etiqueta o símbolo multimedia que no reconoces? Púlsala aquí y lee sus propiedades code y key para entender qué evento dispara, o para mapearla en tu aplicación o en tu configuración de juego.

Verificar el remapeo y los modificadores

Prueba software de remapeo de teclado o combinaciones de teclas a nivel de sistema operativo registrando eventos y confirmando que las teclas pulsadas producen el code y las combinaciones de modificadores esperados. Comprueba que AltGr y otros modificadores internacionales se registran correctamente.

Glosario de eventos de teclado

key
El carácter producido por la pulsación de la tecla, afectado por la distribución del teclado y los modificadores — por ejemplo, "a", "A", "1", "!", "é".
code
La ubicación física de la tecla, independiente de la distribución — por ejemplo, "KeyA", "Digit1", "Enter", "Space", siempre la misma sin importar la distribución o los modificadores.
keyCode (obsoleto)
Un código numérico heredado (por ejemplo, 65 para A). No lo uses en código nuevo — es inconsistente entre navegadores y no funciona de forma fiable con teclados internacionales.
location
La posición física de la tecla: 0 = estándar, 1 = modificador izquierdo, 2 = modificador derecho, 3 = teclado numérico. Distingue el Shift izquierdo del derecho, y las teclas del teclado numérico de las teclas normales.
repeat
Bandera booleana que es true cuando una tecla mantenida pulsada dispara un evento keydown repetido (auto-repetición). El primer keydown es false; los siguientes son true si la tecla sigue pulsada.
Banderas de modificadores (ctrlKey, shiftKey, altKey, metaKey)
Banderas booleanas que indican si se mantuvo pulsado Ctrl, Shift, Alt o Command/Windows durante el evento. Varias banderas pueden ser true simultáneamente para combinaciones de teclas.

Preguntas Frecuentes del registrador de eventos de teclado

¿Cuál es la diferencia entre key y code?

key es el carácter real que produce el teclado (por ejemplo, 'a', 'A', '1', '!'), que depende de tu distribución de teclado y de si se mantienen pulsados modificadores como Shift. code es la ubicación física de la tecla (por ejemplo, 'KeyA', 'Digit1'), independiente de la distribución y de los modificadores — pulsar la misma tecla física en distintas regiones siempre devuelve el mismo code. En teclados internacionales, code se mantiene constante mientras que key cambia.

¿Qué es keyCode y por qué está obsoleto?

keyCode es un código numérico heredado asignado a cada tecla (por ejemplo, 65 para la tecla A). Se usaba antes de las propiedades modernas key y code, y está obsoleto porque era inconsistente entre navegadores y no funciona de forma fiable con teclados internacionales o teclas especiales. Usa code para la ubicación física de la tecla y key para el carácter producido en su lugar.

¿Cómo detecto el chatter de una tecla (una tecla que se registra dos veces)?

El chatter de tecla ocurre cuando una sola pulsación produce dos o más eventos keydown sin un keyup intermedio. Revisa el registrador en busca de entradas keydown duplicadas y rápidas con el mismo code y una diferencia de tiempo muy pequeña (normalmente menos de 50ms). Si una tecla presenta chatter de forma consistente, puede ser un problema de hardware con ese switch. Algunos teclados o drivers se pueden configurar para hacer debounce; consulta el firmware o el software de tu teclado.

¿El registrador guarda o sube mis pulsaciones?

No. Todo el registro ocurre por completo en tu navegador. Nada de lo que escribes se envía a un servidor, se sube, se almacena ni se registra en ningún sitio fuera de tu dispositivo. Al recargar la página se borra el registro por completo. Este registrador es una herramienta de diagnóstico para desarrolladores — tu privacidad y tus datos no se transmiten.

¿Por qué algunas teclas —como Fn o las multimedia— no aparecen en el registro?

Teclas como Fn y muchas teclas dedicadas de multimedia, volumen o brillo las gestiona el firmware del teclado o el sistema operativo antes de que el navegador vea un evento, así que no hay nada que el registrador pueda anotar. Es lo esperado, no un fallo. Una tecla estándar que aquí siga sin producir keydown —después de haber hecho clic en el cuadro de captura para enfocarlo— apunta más bien a un interruptor muerto o a una conexión rota.