Probador de códigos de tecla

¿Qué es un probador de códigos de tecla?

Cuando pulsas una tecla, el navegador dispara un evento keydown que lleva varias propiedades describiendo la misma pulsación de formas distintas. Un probador te enseña qué contienen realmente esas propiedades, que es la manera más rápida de saber qué comprobar en tu código, y la única de estar seguro: la respuesta depende del navegador, del sistema operativo y de la distribución de teclado que tengas delante.

Las tres que importan son key, code y keyCode. El code nombra la tecla física según dónde se sienta en un teclado estadounidense nocional: la tecla junto al Mayús izquierdo es KeyZ tanto si la letra impresa es Z, Y o W. El key es lo que produjo esa pulsación: el carácter real, o un nombre como ArrowLeft o Escape cuando no hay carácter. Y keyCode es un número heredado de un diseño mucho más antiguo que los navegadores siguen enviando.

La demostración está arriba y se hace con una mano. Pulsa la tecla 1: key es «1», code es Digit1, keyCode es 49. Ahora mantén Mayús y púlsala otra vez: code sigue siendo Digit1, keyCode sigue siendo 49, y key ha pasado a ser «!». Dos caracteres distintos, una tecla física y un número incapaz de distinguirlos.

Cómo usarlo

1. Haz clic en el recuadro y pulsa una tecla. El recuadro solo escucha mientras tiene el foco, así que no se captura nada a tus espaldas. Todos los campos del evento aparecen al momento, y debajo se guardan las últimas ocho pulsaciones para comparar dos seguidas.
2. Prueba un par que se diferencie por un modificador. 1 y Mayús+1, o la tecla del punto y coma con y sin Mayús. Fíjate en cómo cambia key mientras code y keyCode se quedan quietos: esa es toda la distinción, visible en un solo teclado.
3. Busca un código en las tablas de abajo. Las dos tablas son las de la propia norma. Busca por nombre o por número; los códigos que la norma recoge bajo dos caracteres distintos van marcados, porque son justo los que keyCode no puede resolver.

keyCode nunca fue una norma, y la norma lo dice

Suele decirse que keyCode está obsoleto. No es exactamente lo que pasó, y lo que pasó es más interesante. La sección 7 de la especificación UI Events, donde se describen estas propiedades, está marcada como no normativa y dice de ellas que «nunca se especificaron formalmente y las implementaciones actuales de los navegadores varían de maneras significativas». La especificación «no define normativamente» ninguna de ellas. Están escritas únicamente para dejar constancia de lo que los navegadores ya hacen.

La razón que se da es que ya es tarde para arreglarlo. Formalizar los atributos heredados «arriesgaría romper tanto contenido como el que arreglaría o habilitaría», porque hay muchísimo código que detecta el navegador y actúa en consecuencia. La especificación añade que estos atributos «no son adecuados para uso internacional, ni atienden preocupaciones de accesibilidad», y que conviene usar key en su lugar.

Entonces hace algo poco habitual: publica dos tablas describiendo aquello en lo que los navegadores coinciden, y las separa según cuánto está dispuesta a afirmar. Una lista los códigos que «no suelen cambiar con la distribución del teclado en sistemas de escritorio» —fíjate en «suelen», que es la palabra que usa la propia norma—. La otra lista signos de puntuación que «PUEDEN cambiar de código entre distribuciones», donde los navegadores dan el número del teclado estadounidense porque el código antiguo lo espera.

La segunda tabla contiene la prueba más contundente de esta página, y no hace falta pulsar nada. Once de sus códigos aparecen dos veces: una para el carácter sin Mayús y otra para el carácter con Mayús. El 186 es a la vez el punto y coma y los dos puntos. El 187 es a la vez el igual y el más. El 222 son a la vez la comilla simple y la doble. La ambigüedad no es un fallo de un navegador ni un caso raro: está impresa en la norma.

Límites honestos

Esta página solo puede decirte lo que tu navegador, en tu sistema operativo, con tu distribución de teclado actual, envía ahora mismo. Eso es genuinamente útil —es la máquina en la que estás depurando— pero no es una respuesta general. Si necesitas saber qué envía un teclado AZERTY francés para una tecla física concreta, ningún probador ejecutándose en tu máquina te lo puede decir: el valor de code se define contra una distribución estadounidense nocional precisamente para que no varíe, y todo lo demás sí varía.

El recuadro solo escucha mientras tiene el foco, y eso es deliberado y no una limitación. Una página que captura todas las pulsaciones pase lo que pase resulta desagradable y rompe los atajos del propio navegador. Por lo mismo, el tabulador no se captura salvo que lo pidas: pulsar el tabulador es como se sale del recuadro con el teclado, y atraparlo en silencio dejaría a alguien encerrado.

Hay teclas que una página web no puede capturar en absoluto, haga lo que haga. El navegador y el sistema operativo se llevan una capa antes, así que una combinación asignada a cerrar una ventana, cambiar de aplicación o abrir un menú del sistema nunca llega a la página. Eso no es algo que un probador pueda sortear, y cualquier página que diga lo contrario está probando otra cosa.

Las teclas muertas merecen conocerse si escribes un idioma con acentos. En muchas distribuciones una tecla de acento no produce ningún carácter por sí sola —modifica el siguiente— y el navegador informa de key como «Dead». El probador las etiqueta en vez de mostrar un valor vacío, porque un campo key vacío parece un fallo cuando es la respuesta correcta.

Por último, las tablas de aquí son las de la norma, no un censo de todo lo que un navegador puede enviar. La mayoría de los códigos no aparecen en ninguna de las dos, y la página lo dice en vez de inventarse un estado: la norma describe solo los valores en los que ha visto coincidir a los navegadores.

¿Por qué es gratis?

Porque no cuesta nada mantenerlo. Todo ocurre en tu navegador: las pulsaciones se leen y se muestran en local, no se envía nada a ninguna parte y no hay cuenta.

Las tablas las extrae de la especificación un guion guardado en el repositorio, y las pruebas las vuelven a extraer y comparan, así que una desviación entre lo que muestra esta página y lo que imprime la norma rompe la compilación en vez de llegar hasta ti. La errata que la propia norma tiene en el nombre de una tecla se conserva a propósito, como prueba de que la tabla se leyó y no se copió de memoria.