Cerca codici tasto JavaScript

Come funziona

1. Premi un tasto: clicca nell'area di input e premi qualsiasi tasto, lettere, cifre, tasti funzione, frecce, modificatori o tasti speciali.
2. Leggi i codici dei tasti: lo strumento mostra all'istante i valori event.key, event.code, event.keyCode (legacy) e charCode del tasto.
3. Usa nel tuo codice: copia i valori esatti necessari per i tuoi listener di eventi tastiera o le tue implementazioni di scorciatoie.

Perché usare il rilevatore di keycode?

Gli eventi tastiera JavaScript espongono diverse proprietà, key, code, keyCode, charCode e which, e sapere quale usare e a quale valore confrontare è sistematicamente delicato. Il rilevatore di KeyCode elimina le supposizioni permettendoti di premere un tasto e vedere subito tutte le sue proprietà di evento. Prezioso per costruire scorciatoie da tastiera, gestire tasti speciali, implementare hotkey ed eseguire il debug dei listener di eventi tastiera.

Funzionalità

• Tutte le proprietà di evento: mostra event.key, event.code, event.keyCode, event.which ed event.charCode per ogni pressione.
• Rilevamento dei tasti modificatori: indica se Shift, Ctrl, Alt e Meta erano premuti durante la pressione.
• Supporto dei tasti speciali: funziona con i tasti funzione (F1–F12), le frecce, Invio, Esc, Tab, Backspace e tutti gli altri tasti speciali.
• Cronologia dei tasti: conserva un registro delle pressioni recenti per confrontare più tasti.
• Copia i valori: clicca su qualsiasi valore per copiarlo direttamente negli appunti.

Domande frequenti

Qual è la differenza tra event.key ed event.keyCode?

event.key è lo standard moderno, restituisce una stringa leggibile come «ArrowLeft» o «Enter». event.keyCode è un codice numerico legacy (deprecato ma ancora supportato). Usa event.key per nuovo codice; event.keyCode per mantenere la compatibilità con i browser più vecchi.

Come rilevare Ctrl+S o altre combinazioni di tasti?

Le combinazioni da tastiera usano event.key combinato a verifiche di modificatori: if (event.ctrlKey && event.key === "s"). Premi Ctrl+S in questo strumento per vedere tutti i valori, poi riproduci la stessa condizione nel tuo listener di evento.

Perché alcuni tasti mostrano lo stesso keyCode?

I valori keyCode non sono stati standardizzati e alcuni tasti condividono codici a seconda del contesto. event.code è più affidabile, identifica la posizione fisica del tasto (per es. «KeyA») indipendentemente dal layout della tastiera, mentre event.key riflette il carattere prodotto da quel tasto.

30 anni di storia degli eventi tastiera in JavaScript

Gli eventi tastiera hanno una storia notoriamente caotica nel DOM. Netscape Navigator 2 (1995) ha introdotto i gestori originali onkeydown, onkeypress e onkeyup con una proprietà numerica keyCode, che non aveva specifiche; i browser hanno inventato ciascuno i propri valori. Internet Explorer 4 (1997) ha implementato la propria variante con event.keyCode come unica proprietà, mentre Netscape è rimasta con event.which. DOM Level 2 Events (W3C, novembre 2000) ha standardizzato il flusso degli eventi (cattura/bolla) ma ha esplicitamente messo da parte gli eventi tastiera perché i fornitori non riuscivano ad accordarsi. Il risultato: gli sviluppatori hanno scritto codice come e.keyCode || e.which per oltre un decennio. DOM Level 3 Events (W3C Working Draft 2003, Raccomandazione 2018) ha finalmente introdotto il moderno event.key (carattere Unicode o tasto nominato come «ArrowLeft») e event.code (posizione fisica del tasto come «KeyA», indipendente dal layout), insieme alla deprecazione di keyCode, charCode e which. La specifica UI Events (W3C, in corso) è la casa moderna di questo lavoro. I browser hanno recuperato gradualmente: Chrome 51 (maggio 2016), Firefox 47 (giugno 2016), Safari 10.1 (marzo 2017) hanno tutti spedito il supporto per event.code. L'evento legacy keypress è deprecato a favore degli eventi beforeinput e input.

Le 5 proprietà, decodificate

• event.key (moderno, usa questo). Il carattere o tasto nominato prodotto. Lettere e cifre ti danno il carattere Unicode rispettando modificatori e layout (Shift+a = «A», AZERTY posizione-Q = «a»). I tasti nominati sono stringhe come «Enter», «Escape», «ArrowLeft», «F5», «Control». Definito in UI Events.
• event.code (moderno, usa per i giochi). Identifica il tasto fisico sulla tastiera, indipendente da layout o modificatori. Esempi: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Usa questo per il movimento WASD, navigazione in stile vim, e scorciatoie che dovrebbero ignorare il layout della tastiera.
• event.keyCode (deprecato). Codice numerico. 13 = Enter, 27 = Escape, 32 = Spazio, 37-40 = Freccia Sinistra/Su/Destra/Giù, 65-90 = A-Z, 112-123 = F1-F12. I valori non sono mai stati standardizzati, sono diventati coerenti tra i browser solo per convergenza. Evita nel nuovo codice.
• event.which (deprecato). Equivalente Netscape di keyCode. Per la maggior parte dei caratteri stampabili e tasti non stampabili, identico a keyCode. Il vecchio polyfill e.keyCode || e.which gestiva i casi in cui uno era 0.
• event.charCode (deprecato, solo su keypress). Il punto di codice Unicode del carattere. 97 per «a», 65 per «A». Si attiva solo su keypress (che è esso stesso deprecato). Gli eventi input e beforeinput sono i sostituti moderni.
• Boolean modificatori. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Command su macOS, tasto Windows su Windows). Controlla sempre i modificatori esplicitamente: e.metaKey || e.ctrlKey per «salva» multipiattaforma (Cmd+S su Mac, Ctrl+S su Windows/Linux).
• event.location. Distingue modificatori sinistro vs destro e il tastierino numerico. 0=standard, 1=modificatore sinistro, 2=modificatore destro, 3=tastierino numerico. Utile per distinguere Shift-sinistro vs Shift-destro per layout di gioco.

Dove la ricerca di keycode conta davvero

• Scorciatoie tastiera dell'applicazione. Cmd/Ctrl+S per salvare, Cmd/Ctrl+Z per annullare, Cmd/Ctrl+K per aprire palette comandi (Slack, Linear, GitHub, Notion lo usano tutti dal 2020 circa). Usa sempre event.key per il tasto stampabile e un boolean modificatore per il meta-tasto.
• Palette comandi e fuzzy finder. Il pattern Cmd+K reso popolare da Slack (2014) e Linear (2019). Ascolta la scorciatoia di apertura globalmente, poi gestisci la navigazione ArrowUp/ArrowDown, Enter per selezionare, Escape per chiudere.
• Giochi browser e sviluppo giochi HTML5. Phaser, Babylon.js, Three.js. Usa sempre event.code per i tasti di movimento così che WASD funzioni su tastiere AZERTY (dove «W» è nella posizione «Z»). Sebastian Lague, Notch (prototipo Minecraft iniziale) e giochi itch.io sono tutti caduti in questa trappola AZERTY.
• Pattern di accessibilità. I dialoghi modali necessitano di Escape per chiudere. I widget Combobox necessitano di ArrowDown/ArrowUp/Enter/Escape. I tooltip devono essere chiusi su Escape. La WAI-ARIA Authoring Practices Guide definisce pattern di interazione tastiera per ogni widget comune; event.key è lo standard per quei controlli.
• Implementazione di editor di testo e codice. Monaco (l'editor di VS Code nel browser), CodeMirror, ProseMirror, Lexical mappano tutti gli eventi tastiera ai comandi. Usano event.code per i binding di tasti in stile vim/emacs che non dipendono dal layout.
• Miglioramenti UX dei moduli. Inviare con Enter, sfocare con Escape, avanzare il focus con Tab. Comune in flussi di checkout, barre di ricerca, campi di autocompletamento.
• Scorciatoie di estensioni browser. Vimium, SurfingKeys, Tridactyl forniscono navigazione tastiera per tutto il web. Ascoltano a livello documento e gestiscono complesse sequenze di tasti modali (gg = vai all'inizio, come vim).

Errori comuni nella gestione degli eventi tastiera

• Usare keyCode in nuovo codice. Deprecato dal DOM Level 3 (2018), storicamente incoerente tra browser, e si rompe su layout non-US (la virgola ha keyCode 188 su US, 191 su alcune tastiere tedesche). Usa event.key invece.
• Codificare e.key === "w" per il movimento di gioco. Sulle tastiere AZERTY (francesi), il tasto W fisico digita «z». I giocatori cercano quello che ricordano come il cluster WASD ma ottengono l'input sbagliato. Usa event.code === "KeyW" invece, che identifica la posizione fisica.
• Controllare solo ctrlKey per «salvare». Su macOS, Cmd+S è la convenzione; ctrlKey è falso ma metaKey è vero. Controlla sempre entrambi: (e.metaKey || e.ctrlKey) && e.key === "s".
• Dimenticare preventDefault su scorciatoie riservate al browser. Dirottare Cmd+S senza preventDefault attiva ancora Save Page As. Lo stesso per Cmd+P (stampa), Ctrl+F (ricerca browser), Ctrl+N (nuova finestra, non può essere bloccato comunque), Ctrl+Tab (Chrome non te lo permette). Chiama e.preventDefault() nel gestore.
• Ignorare la composizione IME. I metodi di input giapponese, cinese, coreano (IME) attivano eventi keydown mentre l'utente compone caratteri. Controlla e.isComposing o usa l'evento compositionend prima di attivare il tuo gestore di scorciatoie. Slack ha famosamente fallito questo per utenti giapponesi nel 2017.
• Usare l'evento deprecato keypress. Si attiva solo per i tasti che producono caratteri (non i tasti freccia, funzione, ecc.). Deprecato; usa keydown per scorciatoie e input/beforeinput per cambi di testo.
• Attivare scorciatoie ad ogni ripetizione. Tenere premuto un tasto attiva ripetutamente eventi keydown. Per azioni toggle (apri palette, cambia tab), controlla e.repeat ed esci presto per evitare di registrare 30 comandi «apri» quando l'utente ha accidentalmente tenuto il tasto.

Altre domande frequenti

Perché il mio gestore tasti non si attiva quando l'utente ha una tastiera non-US?

Quasi sempre perché stai controllando event.key per un carattere che esiste solo con Shift su quel layout. Su una tastiera tedesca QWERTZ, «/» è Shift+7 (non un proprio tasto); su AZERTY francese, le cifre 0-9 sono digitate con Shift+la-riga-sopra. Usa event.code (tasto fisico) per scorciatoie basate sulla posizione, o event.key per scorciatoie basate sul contenuto (dove vuoi davvero il carattere che l'utente ha appena digitato).

Come gestisco Cmd+K / Ctrl+K in modo coerente tra piattaforme?

L'idioma standard: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. Su macOS, e.metaKey è il tasto Cmd; su Windows/Linux, e.ctrlKey è ciò che gli utenti si aspettano. Accetta entrambi. Sempre preventDefault perché il browser lega Cmd+K a «metti a fuoco barra indirizzi» in alcuni browser. Aggiungi !e.repeat per evitare l'attivazione su tasto premuto.

JavaScript può rilevare battiture globali al di fuori della pagina?

No, e questo è di design per sicurezza. Il browser attiva eventi tastiera solo per la pagina o elemento in focus. Le estensioni browser possono ascoltare con ambito più ampio usando l'API chrome.commands. Le app native in Electron, Tauri, ecc., possono usare hook globali a livello OS. Le app bancarie e 2FA dipendono da questa isolazione: una scheda dannosa non può keylogger il tuo gestore di password.

Qual è il modo giusto per rilevare «appena premuto» vs «in fase di pressione»?

Per i toggle, controlla !e.repeat nel gestore keydown, il primo evento ha repeat: false, gli eventi successivi di auto-ripetizione hanno repeat: true. Per azioni continue (movimento di gioco), traccia lo stato dei tasti in un Set: aggiungi su keydown, rimuovi su keyup, poi nel tuo ciclo di rendering controlla keysHeld.has("KeyW"). Questo disaccoppia l'input dal framerate e gestisce più tasti simultanei (movimento + salto).

Viene inviato qualcosa a un server quando premo i tasti qui?

No. Gli eventi tasto vengono catturati localmente da JavaScript e visualizzati su questa pagina senza alcuna richiesta di rete. Apri la scheda Network in DevTools, digita; vedrai zero traffico in uscita. Sicuro per testare in qualsiasi contesto, incluso scoprire cosa producono password o scorciatoie sensibili sulla tua tastiera.