Utilia
Categorie ▾
Lingua: it ▾

Trova codici dei tasti

Premi un tasto qualsiasi per vedere event.key, event.code, keyCode, which e location in JavaScript, con modificatori, cronologia e tabella completa.

Premi “Inizia a catturare i tasti” o fai clic nel riquadro qui sotto, poi premi un tasto qualsiasi. Fai clic fuori dal riquadro per restituire la tastiera alla pagina.

event.key Premi un tasto keyCode – Anche Tab, frecce e scorciatoie vengono catturati qui.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Tasti di blocco attivi
–
Modificatori
ctrlKey shiftKey altKey metaKey
Cronologia dei tasti (più recenti in alto)
Cronologia dei tasti (più recenti in alto)
EventokeycodekeyCodelocationModificatorirepeat
Tabella dei codici dei tasti (US QWERTY)

Tabella dei codici dei tasti (US QWERTY)
keycodekeyCodelocationNota

i valori di key si riferiscono a un layout US senza modificatori; altri layout producono caratteri diversi per lo stesso code. keyCode e which sono deprecati ma ancora molto usati.

Come trovare il codice di un tasto

  1. Premi Inizia a catturare i tasti oppure fai clic nel riquadro grande. Un bordo colorato indica che è in ascolto.
  2. Premi un tasto o una scorciatoia qualsiasi. Il display grande mostra il valore key e il vecchio keyCode, mentre le schede sottostanti elencano event.key, event.code, event.keyCode, event.which, event.location, event.repeat e i Tasti di blocco attivi (Bloc Maiusc, Bloc Num, AltGr).
  3. I badge dei Modificatori si accendono per ctrlKey, shiftKey, altKey e metaKey.
  4. Copia lo Snippet JavaScript per questo tasto. Con Confronta su scegli tra event.key, event.code o event.keyCode (obsoleto).
  5. Scorri la Cronologia dei tasti (più recenti in alto) per confrontare più pressioni. Spunta Registra anche gli eventi keyup per vedere anche i rilasci.
  6. Consulta o filtra la Tabella dei codici dei tasti (US QWERTY) quando ti serve un valore senza dover premere il tasto.

Finché il riquadro ha il focus, l’azione predefinita di ogni tasto è bloccata: Tab, le frecce, Backspace o Ctrl+S vengono catturati invece di spostare il focus o aprire una finestra di dialogo. Fai clic in un punto qualsiasi fuori dal riquadro per restituire la tastiera alla pagina. Alcune scorciatoie vengono gestite dal sistema operativo prima che il browser le veda (Alt+Tab, Ctrl+Alt+Canc, Cmd+Tab, spesso Stamp), quindi nessuna pagina web può leggerle.

key, code o keyCode: quale usare?

Un KeyboardEvent contiene diversi valori che rispondono a domande diverse:

Proprietà Cosa ti dice Esempio (il tasto ò su una tastiera italiana)
key Il carattere o il tasto con nome prodotto, dopo layout e modificatori "ò", "ç" con Shift
code La posizione fisica del tasto, indipendente dal layout "Semicolon"
keyCode / which Un numero storico, di solito il codice ASCII maiuscolo della lettera dipende dal browser
location 0 standard, 1 sinistra, 2 destra, 3 tastierino numerico 0

Usa key quando conta il significato: Invio per inviare, Esc per chiudere, “?” per aprire un pannello di aiuto. Usa code per giochi e scorciatoie che dipendono dalla posizione dei tasti, come il movimento con WASD, che deve restare nello stesso punto anche su una tastiera francese AZERTY o tedesca QWERTZ. Evita keyCode e which nel codice nuovo: sono deprecati, i loro valori per la punteggiatura cambiano da un browser all’altro (Firefox invia 59 per il punto e virgola dove Chrome invia 186) e non distinguono lo Shift sinistro dal destro né i due tasti Invio. Vale comunque la pena conoscerli quando mantieni codice datato, ed è per questo che lo strumento li mostra.

Lo snippet generato

Il listener generato corrisponde esattamente al tasto che hai premuto, compresi Ctrl, Alt e Meta. Per i caratteri stampabili confrontati su key, Shift viene omesso perché fa già parte del valore: Shift+1 dà "!" su un layout US (e anche su quello italiano). Quando premi un modificatore da solo, lo snippet non ripete il relativo flag. Ricorda che metaKey è il tasto Cmd su Mac e il tasto Windows su PC, quindi le scorciatoie multipiattaforma di solito controllano event.ctrlKey || event.metaKey.

Domande frequenti

Perché keyCode mostra lo stesso numero per caratteri diversi?

keyCode identifica il tasto, non il carattere. La cifra 1 e “!” condividono il 49, “a” e “A” condividono il 65. Leggi key per ottenere il carattere reale.

Perché i tasti della mia tastiera italiana hanno nomi strani in code?

code dà ai tasti il nome della loro posizione su una tastiera US QWERTY. Il tasto ò della tastiera italiana si trova dove sul layout US c’è il punto e virgola, quindi il suo code è Semicolon mentre il suo key è “ò”. Allo stesso modo, il tasto con la A su una tastiera francese AZERTY ha code KeyQ.

Cosa significa "Dead" in event.key?

È un tasto morto, come ^ o ¨ su una tastiera francese, che aspetta il tasto successivo per comporre una lettera accentata. Il carattere finale arriva con l’evento del tasto seguente o con l’evento input di un campo di testo. Sul layout italiano standard i tasti morti sono rari, ma compaiono con i layout internazionali.

Perché event.repeat dice sì?

Stai tenendo premuto il tasto e il sistema operativo invia ripetizioni automatiche. Controlla event.repeat per ignorarle, per esempio per attivare una scorciatoia una sola volta.

Quello che digito viene registrato o inviato?

No. Gli eventi della tastiera vengono letti da questa pagina nel tuo browser e non vengono mai inviati altrove. La cronologia scompare quando ricarichi o lasci la pagina.

Strumenti correlati