Buscador de keyCode de JavaScript
Presione cualquier tecla para obtener sus valores keyCode, key, code y which
Captura del teclado
Enfoque aquí y presione una tecla
Los eventos de teclado solo se capturan dentro de esta área. Tab registra la tecla y desplaza el foco al siguiente control.
Para obtener eventos de teclado completos, utilice un teclado físico. Los teclados móviles pueden omitir algunas propiedades.
Pulsaciones recientes
Sus últimas 10 pulsaciones aparecerán aquí.
Detalles del evento de teclado
event.keyevent.codeevent.keyCodeObsoletoevent.whichObsoletoevent.locationevent.repeatTeclas modificadoras
Enfoque el área de captura para inspeccionar un evento de teclado.
Acerca del Buscador de keyCode de JavaScript
El Buscador de keyCode de JavaScript es una herramienta interactiva y gratuita para desarrolladores que muestra al instante todas las propiedades del evento de teclado al pulsar cualquier tecla. Tanto si crea atajos de teclado, controles de juegos o navegación accesible, conocer los valores exactos de event.key, event.code, event.keyCode y event.which es esencial para escribir JavaScript fiable y compatible con todos los navegadores.
Las aplicaciones web modernas dependen en gran medida del manejo de eventos de teclado, desde la validación de formularios hasta las herramientas de colaboración en tiempo real. Esta utilidad de consulta de keyCode elimina las conjeturas: muestra el código de la tecla física, el valor lógico de la tecla, el identificador de ubicación y todos los estados de las teclas modificadoras (Shift, Ctrl, Alt, Meta) en el momento de pulsarla, directamente en su navegador y sin ninguna configuración.
A diferencia de las tablas estáticas de referencia de keyCode, este probador en vivo de eventos de teclado de JavaScript captura eventos reales del navegador para que pueda verificar el comportamiento en distintos sistemas operativos y distribuciones de teclado. También indica claramente qué propiedades están obsoletas, lo que le ayuda a escribir código preparado para el futuro que siga los estándares actuales de Keyboard Event del W3C.
Características principales
- Visualización en tiempo real de
event.key,event.code,event.keyCode,event.whichyevent.location - Indicadores visuales de teclas modificadoras que muestran los estados de Shift, Ctrl, Alt y Meta
- Insignias de obsolescencia en propiedades heredadas como keyCode y which
- Copia con un clic del valor de cualquier propiedad del evento
- Exportación de todos los datos de la tecla como un objeto JSON con formato
- Tabla de historial con las últimas 10 pulsaciones para compararlas
- Distingue automáticamente las ubicaciones izquierda, derecha y teclado numérico
- Representación visual de la tecla para identificarla de forma intuitiva
- Funciona con todas las teclas, incluidas las de función, las flechas y los caracteres especiales
- Diseño totalmente adaptable con compatibilidad con modo oscuro
Cómo usar el Buscador de keyCode de JavaScript
- Active el área de entrada: haga clic en cualquier punto de la zona de pulsación de teclas con borde discontinuo, en la parte superior de la herramienta, para activar la escucha del teclado.
- Pulse cualquier tecla: pulse cualquier tecla del teclado y todas las propiedades del evento aparecerán al instante en la cuadrícula de propiedades inferior.
- Revise los estados de los modificadores: consulte los indicadores de Shift, Ctrl, Alt y Meta para ver qué modificadores estaban activos al pulsar la tecla.
- Copie los valores: haga clic en el icono de copiar junto a cualquier propiedad para copiar su valor, o use el botón "Copiar todo como JSON" para exportar todas las propiedades a la vez.
- Compare teclas: pulse varias teclas seguidas y desplácese hasta la tabla de historial para comparar sus códigos lado a lado.
- Borre y repita: pulse el botón Borrar para restablecer todos los datos y empezar una nueva sesión de pruebas.
Casos de uso
- Desarrollo de atajos de teclado: identifique los valores correctos de key y code para implementar atajos personalizados en aplicaciones web.
- Controles de juegos: asigne teclas físicas a acciones del juego comprobando event.code para crear asignaciones de teclas independientes de la distribución.
- Pruebas de accesibilidad: verifique que la navegación con teclado funciona correctamente y que todos los elementos interactivos responden a las teclas esperadas.
- Migración de código heredado: encuentre los equivalentes modernos de event.key para los valores obsoletos de event.keyCode usados en proyectos antiguos.
- Depuración entre navegadores: confirme que los eventos de teclado producen valores coherentes en Chrome, Firefox, Safari y Edge.
- Validación de formularios de entrada: determine los valores exactos de las teclas para permitir o bloquear caracteres concretos en campos de texto.
- Redacción de tutoriales y documentación: consulte rápidamente datos de keyCode precisos para incluirlos en guías para desarrolladores y material de referencia.
- Diferenciación entre teclado numérico y teclado principal: use la propiedad location para distinguir entre las teclas numéricas del teclado numérico y las estándar.
Preguntas frecuentes
¿Cuál es la diferencia entre event.key y event.code?
event.key devuelve el valor lógico de la tecla (por ejemplo, "a" o "A" según Shift), mientras que event.code devuelve la tecla física del teclado (por ejemplo, "KeyA") sin importar los modificadores ni la distribución del teclado. Use event.key para la entrada de caracteres y event.code para atajos basados en la posición.
¿Sigue siendo seguro usar event.keyCode?
event.keyCode está oficialmente obsoleto según el W3C y puede comportarse de forma inconsistente entre navegadores. En proyectos nuevos, use event.key o event.code. Sin embargo, muchas bases de código heredadas aún dependen de keyCode, por lo que esta herramienta lo muestra como referencia de compatibilidad con versiones anteriores.
¿Por qué es importante el campo location?
La propiedad event.location distingue entre teclas que aparecen en varios lugares del teclado, como Shift izquierdo frente a Shift derecho, o la fila de números frente al teclado numérico. Esto es fundamental para las aplicaciones que necesitan diferenciar teclas duplicadas.
¿Esta herramienta es gratuita?
Sí, el Buscador de keyCode de JavaScript es totalmente gratuito, sin registro, sin límites de uso y sin cargos ocultos. Puede usarlo tantas veces como necesite para desarrollo y pruebas.
¿Mis datos están seguros?
Por supuesto. Toda la detección de teclas se realiza íntegramente en su navegador con eventos de teclado nativos de JavaScript. Ninguna pulsación ni dato de evento se envía a un servidor. Lo que usted escribe permanece totalmente privado en su dispositivo.
¿Funciona en dispositivos móviles?
La herramienta funciona mejor con un teclado físico. En dispositivos móviles, es posible que el teclado en pantalla no active todas las propiedades del evento de forma consistente. Para obtener resultados fiables, use un equipo de escritorio o portátil, o conecte un teclado externo a su dispositivo móvil.
Consejos y buenas prácticas
- Prefiera event.key para la entrada de caracteres: tiene en cuenta automáticamente la distribución del teclado, el idioma y el estado de los modificadores.
- Use event.code para los controles de juegos: las posiciones físicas de las teclas se mantienen constantes sin importar la distribución del teclado del usuario (QWERTY, AZERTY, Dvorak).
- Pruebe siempre las combinaciones de modificadores: pulse Ctrl+Shift+Tecla o Alt+Tecla para confirmar que sus detectores de atajos capturan la combinación correcta.
- Revise la tabla de historial en busca de patrones: comparar varias pulsaciones le ayuda a detectar incoherencias o a encontrar los códigos correctos más rápido.
- Exporte JSON para la documentación: use la función "Copiar todo como JSON" para pegar datos de teclas precisos directamente en los comentarios de su código o en la documentación para desarrolladores.
- Pruebe en varios navegadores: los valores de los eventos de teclado pueden variar entre navegadores, sobre todo en las teclas especiales. Verifique siempre los navegadores de destino.