Crea tu Probador de Teclado Online | Tutorial JavaScript
Un desarrollador de dev.to publicó a mediados de abril de 2026 un probador de teclado completamente funcional que corre en el navegador sin descargas ni instalación. La herramienta detecta teclas defectuosas, prueba N-key rollover y funciona con cualquier layout de teclado (QWERTY, AZERTY, Dvorak) usando solo JavaScript vanilla. El código captura todas las teclas incluyendo Tab y F5, que los navegadores normalmente interceptan.
En 30 segundos
- Un probador de teclado basado en navegador corre completamente en el cliente sin recopilar datos ni requerir backend.
- La clave técnica es mapear teclas por posición física (event.code) en lugar de caracteres, para soportar múltiples layouts sin problemas.
- Usa preventDefault() para capturar teclas especiales que el navegador normalmente intercepta como Tab, F5 y F11.
- Mantiene un Set de teclas actualmente presionadas para detectar N-key rollover y ghosting simultáneamente.
- Herramientas existentes como TestDeTeclado.com, KeyboardTester.pro y Key-Test.com ofrecen alternativas sin necesidad de codear.
Qué es un probador de teclado en el navegador
Un probador de teclado web es una herramienta que corre directamente en tu navegador y te permite testear cada tecla de tu teclado físico viendo feedback visual inmediato. Cuando presionás una tecla, un elemento en pantalla se ilumina para confirmar que se registró. Nada se descarga, nada se envía a un servidor, todo sucede localmente en tu máquina (si es que eso cuenta como privacidad real en 2026).
Por qué necesitás testear tu teclado online
Ponele que compraste un teclado mecánico nuevo, lo usás dos semanas y de repente descubrís que la tecla “D” falla aleatoriamente. Ya pasó la ventana de devolución. O derramaste café en la laptop y querés saber exactamente cuál de las 10 teclas empapadas sobrevivió. El testeo manual es tedioso y poco confiable. Un probador en el navegador te deja saber instantáneamente cuál es el estado real de cada una.
Para teclados mecánicos premium (muchas veces a precios de USD 150 o más), detectar chattering (double-firing) o falta de registro en switches individuales es crítico. Algunos vendedores son estrictos con las devoluciones (spoiler: lo son todos).
Cómo funciona: mapeo de teclas físicas a virtuales
El punto que hace interesante esto es que no todos los teclados son iguales. Un teclado QWERTY francés (AZERTY) tiene las teclas en posiciones diferentes. Lo mismo con Dvorak o Colemak. Si el probador tuviera hard-codeado “tecla A en posición X”, fallaría con otros layouts.
La solución es usar event.code en lugar de event.key. Event.code devuelve la posición física de la tecla (como “KeyA”, “KeyS”, “KeyD”), independientemente del idioma o layout. Event.key, en cambio, devuelve el carácter que produce (“a”, “é”, “ñ”, según tu configuración de teclado). Fijate la diferencia: el código no cambia, el carácter sí. Complementá con aplicaciones web interactivas en JavaScript.
Entonces cada tecla virtual en el HTML lleva un atributo data-code que coincide exactamente con event.code. Cuando el usuario presiona una tecla física, el JavaScript hace matching con ese atributo y enciende la tecla virtual correspondiente. Resultado: funciona en cualquier layout sin tocar una línea de código.
Capturar TODAS las teclas, incluso las que el navegador quiere secuestrar
Acá viene lo complicado. Los navegadores interceptan ciertas teclas por defecto. Tab te lleva al siguiente elemento focusable. F5 refresca la página. F11 alterna pantalla completa. Ctrl+S abre “Guardar como”. ¿Resultado? Si no hacés nada especial, el probador nunca ve esas pulsadas.
La solución es preventDefault(). Lo llamás en el handler keydown y le decís al navegador: “oye, me encargo yo de esto, vos no hagas nada”. Claro, tenés que usar keydown, no keypress (que está deprecated). También conviene escuchar tanto keydown como keyup para mantener estado limpio (una tecla presionada vs liberada).
En el keydown agregás un atributo de clase visual (ponele “active”), en el keyup lo removés. Además, marcás la tecla como “tested” (estado permanente) para que el usuario vea cuáles fueron verificadas durante la sesión.
Detectar N-key rollover y ghosting
N-key rollover significa: cuántas teclas podés presionar simultáneamente antes que el teclado deje de registrar nuevas pulsadas. Un teclado gaming decente detecta 6+ simultáneas sin problema. Uno barato o viejo quizás solo 2 o 3 (ghosting). La herramienta necesita mostrar esto. Ya lo cubrimos antes en herramientas que corren sin APIs externas.
La técnica es mantener un Set de teclas actualmente presionadas. En keydown, agregás. En keyup, removés. El tamaño del Set en cada momento te dice cuántas teclas están siendo presionadas ahora. Mostrá ese número en pantalla. Los usuarios pueden probar presionar combinaciones de 2, 3, 5, 10 teclas y ver qué número máximo logra el teclado antes de fallar.
Alternativas: herramientas existentes
| Herramienta | Características principales | Mejor para |
|---|---|---|
| TestDeTeclado.com | Interfaz simple, soporte en español, detección visual clara, sin instalación | Usuarios casuales que quieren resultado rápido |
| KeyboardTester.pro | Heatmap de pulsadas, historial de sesión, estadísticas de rollover | Testing profundo, análisis de patrones de uso |
| Key-Test.com | Múltiples idiomas, interfaz minimalista, enfoque en velocidad | Desarrolladores, testing rápido |
| Construir el tuyo (vanilla JS) | Control total, sin dependencias externas, customizable | Equipos que alojan su propia herramienta (hosting en donweb.com o similar) |
Errores comunes al construir probadores de teclado
Olvidar preventDefault() en keydown
Sin esto, teclas especiales no se capturan. El navegador toma la acción antes que tu código. El probador queda incompleto.
Usar event.key en lugar de event.code
Si mapeás por carácter, falla con usuarios en otro layout. Un usuario con teclado francés presiona donde está la “A” y tu código espera otra cosa. La solución es siempre event.code (la posición física).
No limpiar el estado de keyup correctamente
Si levantás la mano del teclado pero el handler keyup no ejecuta (foco perdido, ventana minimizada), la tecla queda “pegada” en pantalla como si estuviera siendo presionada. Resultado: un probador que miente. Algunos navegadores también fuerzan un keyup cuando pierden el foco, pero no todos.
Preguntas Frecuentes
¿Cómo sé si mi teclado tiene teclas defectuosas?
Abrís un probador en el navegador, presionás cada tecla una por una viendo que se encienda en pantalla. Si una no se enciende o se enciende irregularmente, está defectuosa. Algunos probadores guardan estado de cada tecla testeada para que veas de una qué falta. Cubrimos ese tema en detalle en herramientas esenciales para desarrolladores.
¿Funciona con teclados mecánicos y de membrana?
Sí, con los dos. No importa el tipo de switch físico. Lo que importa es que el teclado esté conectado y hable el protocolo estándar HID (Human Interface Device) que todo teclado moderno usa.
¿Qué pasa si tengo un teclado en idioma distinto?
Si el probador está bien hecho (usa event.code, no event.key), funciona perfecto. La posición física no cambia entre layouts, solo los caracteres que producen las teclas.
¿Cuántas teclas puedo presionar a la vez?
Depende del teclado. Teclados mecánicos gaming suelen hacer 6+ simultáneas sin problema. Teclados viejos de oficina quizás 2 o 3. El probador te muestra el número exacto durante el testing.
¿Necesito instalar algo?
No. Los probadores en navegador no requieren instalación ni descarga. Entras a la página y listo. Todo corre en tu navegador sin enviar datos a ningún servidor.
Conclusión
Un probador de teclado basado en navegador es una herramienta simple pero técnicamente interesante. Resuelve un problema real (testear teclas defectuosas sin instalación), demuestra conceptos de JavaScript como event handling, layout independence y state management, y lo mejor es que podés construir una versión funcional en una tarde. La comunidad ya ofrece alternativas como TestDeTeclado.com y KeyboardTester.pro si no querés codear. Pero si te interesa aprender cómo capturar eventos de teclado de forma robusta y manejar edge cases como preventDefault() en teclas especiales, es un proyecto gold.
