Testador de Eventos de Teclado

event.key: o valor lógico da chave — o que a chave produz baseado no layout do teclado e modificadores. "a" sem modificadores, "A" com Shift, "Enter", "ArrowLeft". Com suporte a localização. event.code: a localização física da chave no teclado, independente do layout. "KeyA", "Enter", "ArrowLeft", "Digit1". Mesmo código independentemente se Shift está pressionado. event.keyCode (descontinuado): um código numérico. Varia por navegador e SO. Use event.key ou event.code em vez disso. Melhor prática: use event.key para entrada de caracteres, event.code para atalhos baseados em posição (como WASD em jogos).

Verifique as propriedades booleanas no evento: event.ctrlKey, event.shiftKey, event.altKey, event.metaKey (⌘ no Mac, ⊞ no Windows). Exemplo: if (event.ctrlKey && event.key === "s") saveDraft(). As próprias teclas modificadoras disparam eventos keydown com valores de chave "Control", "Shift", "Alt", "Meta". Para atalhos multiplataforma: use ctrlKey para Ctrl em Windows/Linux mas metaKey para ⌘ no Mac: const isModKey = event.ctrlKey || event.metaKey. KeyboardEvent.getModifierState("CapsLock") verifica estados modificadores persistentes.

keydown: dispara quando a chave é pressionada inicialmente. Dispara repetidamente se mantida. Funciona para todas as chaves incluindo Ctrl, Shift, teclas de seta. Melhor para: atalhos, controles de jogo, prevenção padrão. keypress (descontinuado): dispara apenas para chaves que produzem caracteres. Não dispara para teclas de seta, backspace, etc. Descontinuado em favor de keydown + event.key. keyup: dispara quando a chave é solta. Dispara apenas uma vez por pressionamento de chave. Melhor para: detectar quando uma chave foi pressionada sem repetição. Eventos Input (input, change): melhor para rastreamento de entrada de texto do que eventos de teclado.

Chame event.preventDefault() no handler keydown. Exemplo: document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); save(); } }). Limitações: alguns atalhos em nível de SO (Ctrl+Alt+Delete, tecla Win, mission control) não podem ser prevenidos. Atalhos de navegador variam por navegador. Em iframes, alguns atalhos podem ser interceptados pelo pai. Eventos sintéticos React: event.nativeEvent.preventDefault() ou event.preventDefault() ambos funcionam. Nota: event.stopPropagation() previne o evento de fazer bubbling, mas não previne o comportamento padrão do navegador.

React usa eventos sintéticos: onKeyDown, onKeyUp, onKeyPress (descontinuado). Exemplo: <input onKeyDown={(e) => { if (e.key === "Enter") submit(); if (e.key === "Escape") cancel(); }}/>. Para atalhos globais: use useEffect para adicionar/remover listeners de eventos nativos. Sempre remova listeners na limpeza: useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []). Para sistemas de atalho complexos, use bibliotecas como react-hotkeys-hook ou tinykeys.