Visor de código de tecla

¿Qué es un visor de código de tecla?#

Cuando una tecla se pulsa, el navegador dispara un KeyboardEvent que lleva dos respuestas paralelas a la pregunta «¿qué tecla?». El campo key dice qué carácter produjo la pulsación: a, A, Enter, ?. El campo code dice qué tecla física se pulsó: KeyA, Enter, Slash, independientemente de la distribución. Esas dos respuestas se separan en cuanto entran en juego un teclado internacional, un modificador o un teclado numérico, y la diferencia es justamente lo que necesitas ver cuando cableas un atajo, un control de juego o una funcionalidad de accesibilidad.

Esta página captura cada keydown en una instantánea y deja cada campo al descubierto: key, code, los números heredados keyCode y which (conservados para depurar código antiguo), la location (estándar / izquierda / derecha / numérico), los modificadores activos y si la pulsación fue una auto repetición. Un historial rodante de las últimas pulsaciones sigue visible para que puedas rastrear un acorde o una secuencia.

Nada es global: la captura ocurre solo mientras el foco está dentro de la zona de captura, así que el resto de la página sigue obedeciendo al teclado con normalidad.

Cómo se usa#

1. Pulsa en cualquier punto de la zona de captura discontinua de la parte superior (o entra en ella con Tab). Se resalta para mostrar que está escuchando.
2. Pulsa una tecla, o un acorde. La tabla de instantánea de debajo se actualiza en cada keydown.
3. Lee las filas:
   • key: el valor lógico de la tecla (el carácter o tecla con nombre que el navegador resolvió).
   • code: la tecla física, independiente de la distribución. Es lo que debes emparejar para los atajos.
   • keyCode y which: los códigos numéricos obsoletos, marcados con una insignia obsoleto. Emparéjalos solo al portar código antiguo que aún los lee.
   • location: estándar, izquierda, derecha o teclado num.. Así distingues el Shift izquierdo del derecho, o el 5 del teclado numérico del 5 de la fila superior.
   • repeat: sí mientras una tecla se mantiene pulsada y se autorepite.
   • modifiers: insignias para cada uno de Ctrl, Alt, Shift, Meta que estuviera pulsado.
4. Marca Bloquear la acción predeterminada de las teclas en la barra de opciones si quieres que la página impida al navegador actuar sobre la tecla (por ejemplo, para evitar que Tab mueva el foco mientras pruebas).
5. Usa Copiar actual para llevarte la instantánea actual, y Borrar historial en el panel de historial para reiniciar la lista rodante.

Características clave#

• key y code, lado a lado. La distinción más útil del manejo de teclado, hecha visible en cada pulsación, así ves de inmediato por qué key === "@" puede venir de Shift+Digit2 en una distribución y de una tecla física completamente distinta en otra.
• Consciencia de la location. Los modificadores izquierdo y derecho se reportan por separado, y las teclas del teclado numérico llevan location: numpad. Esencial para las distribuciones de juego, donde el mismo dígito significa cosas distintas en la fila principal frente al teclado numérico.
• Insignias de modificadores. Ctrl, Alt, Shift y Meta (Command en macOS, Super/Windows en el resto) se muestran en el orden convencional, para que puedas leer un acorde de un vistazo.
• Campos heredados, claramente marcados. keyCode y which están obsoletos y se han eliminado de las especificaciones modernas, pero mucho código existente aún los lee. Se muestran con una etiqueta obsoleto visible y una nota al pie, nunca como la respuesta principal.
• Historial rodante de 20. Mantén pulsada una tecla y observa cómo repeat pasa a sí en cada autodisparo; pulsa una secuencia y recórrela hacia atrás. Cada entrada es una instantánea aislada.
• Captura acotada. El listener está ligado a la zona de captura, no a la ventana. El resto de la página (Tab, scroll) sigue funcionando hasta que vuelvas a enfocar la zona.

Ejemplo práctico#

Una fuente clásica de confusión es la diferencia entre el 1 de la fila superior y el 1 del teclado numérico. Producen el mismo carácter, pero no son la misma tecla.

Pulsa el 1 de la fila superior y la instantánea reza:

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

Ahora pulsa el 1 del teclado numérico (con Bloq Num activo) y la instantánea reza:

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

Mismo key, distinto code, distinta location, distinto código heredado. Si estás vinculando un atajo, emparejas con code === "Digit1" para significar «la fila encima de las letras» y con code === "Numpad1" para significar «el teclado numérico», y evitas la trampa de emparejar con key === "1", que se dispara para ambos.

Preguntas frecuentes#

¿Debo emparejar con key o con code?#

Depende de lo que estés construyendo. Empareja con code para atajos y controles de juego, donde la posición física de la tecla importa y no quieres que el vínculo cambie cuando el usuario pase a una distribución Dvorak o no latina. Empareja con key para entrada de texto, donde lo que te importa es el carácter producido (? frente a /, o caracteres compuestos con teclas muertas). Para acordes de modificadores, comprueba los flags de modificador (ctrlKey, metaKey…) en vez del propio valor key del modificador.

¿Por qué keyCode y which están marcados como «obsoletos»?#

Están en desuso y se han eliminado de la especificación UI Events. Los navegadores siguen rellenándolos por compatibilidad, pero sus valores nunca fueron consistentes entre navegadores ni distribuciones (la misma tecla física podía reportar números distintos). El código moderno debería leer key y code. Aquí se muestran solo para que puedas depurar o portar código heredado que aún dependa de los números: nunca los uses para nuevos vínculos.

La página no captura mis pulsaciones. ¿Por qué?#

La captura está acotada a la zona discontinua. Si el foco se ha movido a otro sitio (porque saliste con Tab o pulsaste otro control), la zona deja de escuchar. Pulsa de nuevo dentro de la zona (se resaltará) y las pulsaciones vuelven a registrarse. Esta acotación es intencionada: mantiene el resto de la página accesible por teclado.

¿La tecla Meta significa Command o Windows?#

Ambas cosas: Meta es la tecla «super» de la plataforma: Command en macOS, la tecla Windows / Super en Linux y Windows. La insignia dice Meta en vez de adivinar el sistema operativo, porque el campo subyacente metaKey es lo que tu código necesita comprobar de verdad.