Un utente preme Escape e la modale non si chiude. Preme Invio nel campo di ricerca e non succede nulla. Ti suona familiare? La gestione della tastiera in JavaScript sembra semplice finché non inizi ad avere a che fare con tre eventi, una dozzina di proprietà e uno zoo di differenze tra browser.

Ogni keydown o keyup genera un oggetto KeyboardEvent con due dozzine di campi. Alcuni sono deprecati dall'era di IE, altri si comportano diversamente in Firefox e Chrome. E la documentazione MDN è piena di note «non utilizzare». Gli sviluppatori non hanno bisogno di un'altra specifica, hanno bisogno di un cheat sheet che funzioni.

Quella che segue è una guida di riferimento completa sugli eventi di tastiera: dall'anatomia del KeyboardEvent a snippet pronti all'uso per le scorciatoie da tastiera. Tieni la tabella dei codici tra i preferiti, ti servirà in un progetto su due.

💡 Panoramica rapida:

• Usa keydown invece di keypress: funziona per qualsiasi tasto.
• event.key restituisce il simbolo del tasto, event.code restituisce il suo codice fisico.
• event.keyCode e event.which sono deprecati, non usarli nel nuovo codice.
• La tabella seguente raccoglie i codici per tutti i tasti standard nei browser moderni.

Cosa c'è dentro KeyboardEvent

Quando un utente preme un tasto qualsiasi, il browser crea un oggetto KeyboardEvent, discendente di UIEvent, che a sua volta estende l'Event di base. Al suo interno ci sono le proprietà del tasto, lo stato dei modificatori, le informazioni sul layout.

La specifica UI Events è in evoluzione: compaiono nuove proprietà, quelle vecchie vengono deprecate. Il cambiamento principale degli ultimi anni è l'abbandono dei codici numerici (keyCode / charCode / which) a favore di event.key e event.code. Tutti i browser moderni supportano questa coppia e dovresti costruire la tua logica su di essi.

Il supporto dei browser è quasi completo: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Se il tuo progetto non è bloccato su IE11, puoi dimenticarti di event.which.

Tre eventi: keydown, keypress e keyup

Il browser distingue tre eventi di tastiera. L'ordine di esecuzione è fisso:

• keydown, il tasto viene premuto (momento del contatto);
• keypress, il tasto è tenuto premuto e genera un carattere (solo per i tasti carattere);
• keyup, il tasto viene rilasciato.

Sottoscrizione a keydown tramite addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Per i gestori inline, usa un attributo dell'elemento:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Se stampi l'oggetto evento nella console, vedrai la struttura completa con tutti i campi ereditati da UIEvent ed Event:

Perché keydown è la scelta principale

keypress è ufficialmente riconosciuto come deprecato. Si attiva solo per i tasti che producono un valore carattere e non intercetta i modificatori: non Alt, non Ctrl, non Shift, non Meta. Non puoi gestire Ctrl+Z o Shift+Tab tramite keypress.

La differenza tra keydown e keyup: keydown si attiva prima che il browser elabori il tasto; keyup si attiva dopo. Ne consegue un aspetto importante: event.preventDefault() dentro keydown annulla l'azione del browser (ad esempio, l'inserimento di un carattere in un campo), ma dentro keyup non lo fa. Per scorciatoie, validazione dell'input e controlli di gioco, ti serve keydown.

Tabella delle proprietà di KeyboardEvent

Le ultime tre righe sono deprecate. Dove possibile, passa a event.key. Se devi supportare un vecchio browser, crea un fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Ma nel 2026, questo codice serve solo per progetti legacy. event.key funziona ovunque.

Tasti modificatori e combinazioni

I tasti Control, Shift, Alt e Meta non eseguono azioni di per sé, ma modificano il comportamento di altri tasti. Premere Z produce la lettera "z", mentre Ctrl+Z esegue l'annullamento.

Le proprietà booleane dell'evento aiutano a tracciare un modificatore:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

Lo stesso approccio si applica a qualsiasi combinazione: Ctrl+S (salva), Ctrl+Shift+N (nuova finestra), Alt+Tab (cambia). Controlla l'ordine: prima i modificatori tramite flag booleani, poi event.key per il tasto specifico. Questo rende la logica leggibile invece di annegarla in codici numerici.

Tabella completa dei codici tasto

Di seguito la tabella aggiornata per tutti i tasti standard. I valori event.key e event.code sono riportati come li restituiscono i browser moderni (Chrome, Firefox, Edge, Safari).

Navigazione e azioni

Riga numerica (tastiera principale)

Lettere A-Z

event.key restituisce il valore minuscolo per le lettere. event.code non dipende da maiuscole/minuscole o layout: KeyA indica il tasto fisico A, anche se il layout è russo e l'input è "Ф".

Tasti speciali

Tastierino numerico (Numpad)

Tasti funzione

Sistema e multimediali

Punteggiatura e simboli

Note importanti sulla tabella

• event.which è una proprietà deprecata, usa event.key.
• event.code è identico per le lettere minuscole (a) e maiuscole (A), è il tasto fisico. event.key restituisce il carattere effettivo considerando maiuscole/minuscole.
• In Firefox, i valori event.which per i tasti Equal, Semicolon e Minus differiscono da Chrome/Edge/Safari (annotato in tabella). Un altro motivo per non usare event.which.
• I browser basati su Chromium e Firefox restituiscono event.key e event.code identici per tutti i tasti elencati.
• Tastiere virtuali: la specifica UI Events richiede che una tastiera virtuale (mobile, su schermo) che replica un layout standard restituisca event.code corretto. In pratica, i browser mobile (Chrome Android, Safari iOS) gestiscono correttamente keydown/keyup per i tasti principali, ma event.code potrebbe essere vuoto per layout non standard.

Trainer interattivo

Per una verifica rapida di qualsiasi codice dell'articolo, usa il trainer di tastiera: keyevents.netlify.app. Sposta il cursore nell'area, premi i tasti e vedi in tempo reale i valori di event.key, event.code e event.which, oltre allo stato dei flag dei modificatori. Il codice sorgente è disponibile su GitHub.

Video: eventi di tastiera in pratica

Un'analisi pratica breve di keydown e keyup, con gestione di modificatori e scorciatoie ed esempi dal vivo:

⁉️🤔 Domande frequenti

Qual è la differenza tra event.key e event.code?

event.key restituisce il valore carattere considerando layout e maiuscole/minuscole: per il tasto A è "a" (o "A" con Shift), per il layout russo, "ф". event.code restituisce il codice fisico del tasto, identico per tutti i layout: "KeyA". Per le scorciatoie, event.code è più affidabile, non dipende dalla lingua di input. Per l'inserimento di testo, usa event.key.

Perché keypress non si usa più?

La specifica W3C ha marcato keypress come deprecato: si attiva solo per i tasti carattere e non intercetta i modificatori. Non puoi gestire Ctrl+C, Shift+Tab e altre combinazioni tramite keypress. keydown copre tutti i tasti ed è supportato in modo identico in tutti i browser moderni.

Si può abbandonare completamente event.which e event.keyCode?

Sì, nel 2026 puoi farlo. event.key è supportato in Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Se il tuo progetto non ha come target IE11 o Firefox 28, usa solo event.key e event.code.

Come si gestisce la pressione prolungata di un tasto?

Combina keydown e keyup. Su keydown avvia un timer o requestAnimationFrame, su keyup azzeralo. Per l'input di gioco, questo è il pattern standard: tasto premuto, il personaggio si muove, rilasciato, si ferma.

Gli eventi di tastiera funzionano sui dispositivi mobili?

keydown e keyup funzionano nei browser mobile quando si usa una tastiera Bluetooth esterna. La tastiera su schermo genera eventi input, non keydown/keyup per tutti i tasti, quindi per i campi di testo su mobile è meglio usare l'evento input.

Come si distingue lo Shift sinistro da quello destro?

Tramite event.code: "ShiftLeft" o "ShiftRight". event.key restituisce "Shift" per entrambi. Lo stesso vale per Control, Alt e Meta.

Cosa usare nel tuo progetto

Se stai scrivendo nuovo codice, prendi keydown come evento principale e, per l'identificazione del tasto, event.key (simbolo) e event.code (tasto fisico). Questa combinazione copre tutti gli scenari: scorciatoie da tastiera, navigazione, input di gioco, validazione form.

Se mantieni un prodotto con codice legacy basato su event.which o event.keyCode, pianifica un refactoring. Il volume di lavoro è ridotto: sostituzione nei gestori, ma il beneficio è un codice pulito e prevedibile senza uno zoo di differenze tra browser.

Tieni la tabella qui sopra tra i preferiti. La prossima volta che ti serve il codice per un tasto specifico, aprila e copia il valore event.code che ti serve, senza dover ricordare codici numerici dell'era di IE6.