Probador de Eventos del Teclado

event.key: el valor lógico de la tecla — lo que produce la tecla según la disposición del teclado y los modificadores. "a" sin modificadores, "A" con Mayús, "Enter", "ArrowLeft". Reconoce el idioma. event.code: la ubicación física de la tecla en el teclado, independiente de la disposición. "KeyA", "Enter", "ArrowLeft", "Digit1". El mismo código independientemente de si se presiona Mayús. event.keyCode (obsoleto): un código numérico. Varía según el navegador y el sistema operativo. Use event.key o event.code en su lugar. Mejor práctica: use event.key para entrada de caracteres, event.code para atajos basados en posición (como WASD en juegos).

Verifique las propiedades booleanas en el evento: event.ctrlKey, event.shiftKey, event.altKey, event.metaKey (⌘ en Mac, ⊞ en Windows). Ejemplo: if (event.ctrlKey && event.key === "s") guardarBorrador(). Las propias teclas modificadoras disparan eventos keydown con valores de tecla "Control", "Shift", "Alt", "Meta". Para atajos multiplataforma: use ctrlKey para Ctrl en Windows/Linux pero metaKey para ⌘ en Mac: const esModKey = event.ctrlKey || event.metaKey. KeyboardEvent.getModifierState("CapsLock") verifica estados de modificadores persistentes.

keydown: se dispara cuando la tecla se presiona por primera vez. Se dispara repetidamente si se mantiene pulsada. Funciona para todas las teclas incluyendo Ctrl, Mayús, teclas de flecha. Mejor para: atajos, controles de juego, prevención de comportamiento predeterminado. keypress (obsoleto): se dispara solo para teclas que producen caracteres. No se dispara para teclas de flecha, retroceso, etc. Obsoleto en favor de keydown + event.key. keyup: se dispara cuando se suelta la tecla. Solo se dispara una vez por pulsación. Mejor para: detectar cuándo se presionó una tecla sin repetición. Eventos de entrada (input, change): mejores para rastrear entrada de texto que los eventos de teclado.

Llame a event.preventDefault() en el manejador keydown. Ejemplo: document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); guardar(); } }). Limitaciones: algunos atajos a nivel del sistema operativo (Ctrl+Alt+Supr, tecla Win, control de misión) no se pueden prevenir. Los atajos del navegador varían según el navegador. En iframes, algunos atajos pueden ser interceptados por el padre. Eventos sintéticos de React: event.nativeEvent.preventDefault() o event.preventDefault() ambos funcionan. Nota: event.stopPropagation() evita que el evento se propague, pero no evita el comportamiento predeterminado del navegador.

React usa eventos sintéticos: onKeyDown, onKeyUp, onKeyPress (obsoleto). Ejemplo: <input onKeyDown={(e) => { if (e.key === "Enter") enviar(); if (e.key === "Escape") cancelar(); }}. Para atajos globales: use useEffect para añadir/eliminar listeners de eventos nativos. Siempre elimine los listeners en la limpieza: useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []). Para sistemas de atajos complejos, use bibliotecas como react-hotkeys-hook o tinykeys.