Detector de Eventos de Teclado | KeyCodes en Tiempo Real ⌨️

Esta es una herramienta interactiva diseñada para inspeccionar, en tiempo real, las propiedades de los eventos de teclado en JavaScript (key, code y which). Es el aliado perfecto si estás depurando código o configurando atajos de teclado personalizados para tu aplicación.

💡 Sobre esta herramienta

¿Alguna vez has necesitado el valor exacto de una tecla para programar una funcionalidad? Con este detector, puedes visualizar al instante toda la información que el navegador recibe al pulsar cualquier tecla. Olvídate de tener que abrir la consola de desarrollador para hacer pruebas rápidas.

Es especialmente útil cuando trabajas con diferentes distribuciones de teclado (como el teclado español, latinoamericano o inglés) o cuando necesitas gestionar combinaciones complejas con teclas especiales.

📘 Consejos de uso

• Basta con pulsar una tecla: No hace falta que hagas clic en ningún botón de entrada. Simplemente presiona cualquier tecla y verás cómo la información se actualiza automáticamente en la tarjeta principal.
• Teclas modificadoras: Los indicadores visuales te confirmarán si las teclas Shift, Ctrl, Alt o Meta (la tecla Windows o Command en Mac) están activas durante la pulsación.
• Bloquear comportamiento nativo (Prevent Default): Si activas esta opción, podrás probar teclas como F12, F5 o Tab sin que el navegador ejecute su acción predeterminada (como recargar la página o cambiar el foco).
• Historial de eventos: Debajo de la tarjeta principal, verás un registro de tus últimas pulsaciones. Es ideal para verificar el orden exacto de las secuencias rápidas o "combos".

🧐 Preguntas frecuentes

¿Qué es el valor "which"?
Es una propiedad antigua (deprecated) que devuelve un código numérico. Aunque los estándares modernos recomiendan usar key y code, todavía es muy frecuente encontrarla en proyectos heredados o librerías más antiguas.

¿Detecta la tecla "Command" de Mac?
¡Claro! En los navegadores modernos, esta tecla se identifica dentro de la categoría Meta.

¿Por qué obtengo códigos diferentes con la misma tecla?
Si utilizas un método de entrada (IME) para idiomas como el japonés o el chino, o si tienes configurada una distribución de teclado internacional, los valores pueden variar. Para obtener los códigos base más limpios, asegúrate de que el idioma de entrada sea el estándar.

📚 Un detalle técnico: ¿key o code?

Entender la diferencia entre estas dos propiedades te ayudará a crear mejores experiencias de usuario:

1. key: Se refiere al valor del carácter. Si pulsas la tecla "a" mientras mantienes Shift, la key será A. Es lo que el usuario espera ver escrito.
2. code: Se refiere a la posición física de la tecla en el teclado. No importa si tu teclado está en español o inglés; la tecla situada a la derecha del Tabulador siempre devolverá KeyQ.

Consejo de experto: Usa code para controles de movimiento en juegos (como las teclas WASD) y key cuando lo que te importe sea el carácter que el usuario intenta escribir.