Códigos de Eventos de Teclado - Visor de Eventos JavaScript en Línea
Presiona cualquier tecla para ver las propiedades del evento de teclado JavaScript en tiempo real. Consulta event.key, event.code, keyCode, estados de modificadores y más — 100% del lado del cliente, sin envío de datos al servidor.
Preguntas Frecuentes
¿Qué es un visor de códigos de eventos de teclado?
Un visor de códigos de eventos de teclado es una herramienta en línea que muestra todas las propiedades de KeyboardEvent de JavaScript cuando presionas cualquier tecla. Muestra valores como event.key (el carácter o nombre de la tecla), event.code (el identificador de la tecla física), event.keyCode (el código numérico), estados de las teclas modificadoras y más. Los desarrolladores usan esta herramienta para consultar rápidamente los valores correctos al construir interacciones de teclado, juegos, funciones de accesibilidad o validación de formularios.
¿Cómo uso esta herramienta de códigos de eventos de teclado?
Haz clic en el área de captura en la parte superior de la página y presiona cualquier tecla. La herramienta muestra instantáneamente todas las propiedades del evento, incluyendo key, code, keyCode, which, location y estados de teclas modificadoras. Puedes cambiar entre los tipos de evento keydown, keyup y keypress usando las pestañas. Usa los botones de copia para copiar valores individuales o los datos completos del evento como JSON.
¿Mis datos están seguros? ¿Se registran mis pulsaciones de teclas?
Toda la captura de eventos de teclado ocurre 100% en tu navegador. No se envían pulsaciones de teclas, datos de eventos ni ninguna otra información a ningún servidor. La herramienta utiliza las APIs nativas de KeyboardEvent del navegador sin llamadas a servicios externos. Tus pulsaciones solo se almacenan temporalmente en la memoria del navegador para el registro de historial y se eliminan cuando cierras la página.
¿Cuál es la diferencia entre event.key y event.code?
event.key representa el valor lógico de la tecla presionada, que cambia según la distribución del teclado y las teclas modificadoras. event.code representa la posición física de la tecla en el teclado, independientemente de la distribución o modificadores. La misma tecla física siempre devuelve code: 'KeyA' sin importar si presionas Shift o usas una distribución QWERTY o AZERTY. Usa event.key para manejo de entrada de texto y event.code para controles de juegos o acciones independientes de la distribución.
¿Por qué están obsoletos keyCode, which y charCode?
Estas propiedades están obsoletas porque son inconsistentes entre navegadores y distribuciones de teclado. event.keyCode devuelve diferentes valores numéricos para la misma tecla en diferentes sistemas operativos. Los reemplazos modernos son event.key (para el valor del carácter) y event.code (para la tecla física). Todos los navegadores modernos soportan estas propiedades más nuevas con valores consistentes y predecibles entre plataformas.
¿Qué me indica event.location?
event.location indica dónde está ubicada la tecla en el teclado. Devuelve un número: 0 (Estándar) para la mayoría de teclas, 1 (Izquierda) para teclas modificadoras del lado izquierdo, 2 (Derecha) para modificadores del lado derecho, y 3 (Teclado numérico) para teclas del teclado numérico. Es útil cuando necesitas distinguir entre las teclas Shift izquierda y derecha, o entre la tecla Enter principal y la del teclado numérico.
¿Cuál es la diferencia entre los eventos keydown y keyup?
keydown se dispara en el momento en que se presiona una tecla y continúa disparándose repetidamente si la tecla se mantiene presionada (con event.repeat en true). keyup se dispara una vez cuando se suelta la tecla. El evento obsoleto keypress se dispara entre keydown y keyup pero solo para teclas que producen un valor de carácter. Para la mayoría de los casos, keydown es el evento recomendado.
Ejemplos de Código
// Keyboard Event Handling in JavaScript
// Basic keydown event listener
document.addEventListener('keydown', (event) => {
console.log('key:', event.key); // "a", "Enter", "Shift"
console.log('code:', event.code); // "KeyA", "Enter", "ShiftLeft"
console.log('keyCode:', event.keyCode); // 65, 13, 16 (deprecated)
console.log('location:', event.location); // 0, 0, 1
// Modifier key states
console.log('shiftKey:', event.shiftKey);
console.log('ctrlKey:', event.ctrlKey);
console.log('altKey:', event.altKey);
console.log('metaKey:', event.metaKey);
console.log('repeat:', event.repeat);
});
// Using event.code for layout-independent controls (e.g., WASD)
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward(); break;
case 'KeyA': moveLeft(); break;
case 'KeyS': moveBackward(); break;
case 'KeyD': moveRight(); break;
case 'Space': jump(); break;
}
});
// Detecting modifier combinations
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveDocument();
}
if (event.metaKey && event.key === 'k') {
event.preventDefault();
openCommandPalette();
}
});
// Extracting full event data as an object
function extractKeyEventData(event) {
return {
type: event.type,
key: event.key,
code: event.code,
keyCode: event.keyCode,
which: event.which,
charCode: event.charCode,
location: event.location,
repeat: event.repeat,
isComposing: event.isComposing,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey,
};
}
document.addEventListener('keydown', (event) => {
const data = extractKeyEventData(event);
console.log(JSON.stringify(data, null, 2));
});