JavaScript Keyboard Event: eventi tastiera

JavaScript Keyboard Event è un oggetto che descrive l’interazione di un utente con la tastiera del proprio dispositivo.

Esistono diversi tipi di eventi basati su JavaScript Keyboard Event.

In questo articolo vedrai un esempio di utilizzo di questi eventi.

Indice

JavaScript Keyboard Event: cosa è

Ogni volta che l’utente interagisce con la tastiera, un JavaScript Keyboard Event viene creato dal browser.

Esistono due tipi di JavaScript Keyboard Event: keydown e keyup.

Gli eventi di tipo keydown vengono creati quando viene premuto un pulsante sulla tastiera.

Invece, quelli con tipologia keyup vengono creati quando un pulsante viene rilasciato.

Per completezza, menzionerò anche il tipo keypress.

Questo evento era nato per ottenere degli eventi ogni volta che un pulsante veniva premuto e rilasciato.

Tuttavia, questo tipo è attualmente considerato obsoleto.

Per questo motivo, il suo supporto non è garantito, non andrebbe utilizzato in produzione.

JavaScript Keyboard Event: quale tasto è stato premuto

L’evento corrispondente all’interazione dell’utente con la tastiera contiene numerose informazioni.

Ecco le principali:

key: è una stringa che rappresenta il tasto premuto nel layout tastiera attivo
code: è una stringa che rappresenta il tasto premuto nel layout tastiera internazionale
altKey: un valore booleano che rappresenta se il tasto alt (o option su Mac OSx) è premuto
ctrlKey: un valore booleano che rappresenta se il tasto ctrl (control) è premuto
metaKey: un valore booleano che rappresenta se il tasto meta (tasto Windows o Command o su Mac OSx) è premuto
shiftKey: un valore booleano che rappresenta se il tasto shift (in italiano, Maiusc) è premuto

Puoi trovare tutte le informazioni su Keyboard Event nella pagina ufficiale di MDN.

JavaScript Keyboard Event: esempio

Nel form qui sotto puoi controllare le informazioni contenute negli eventi JavaScript relativi all’interazione con la tastiera.

Digita con la tua tastiera qualche carattere nel form presente, subito sotto vedrai la serializzazione JSON degli eventi relativi alle tue interazioni.

Nel caso non sapessi cosa sia la serializzazione in JSON, ti consiglio di consultare l’articolo File JSON: cosa sono, come si utilizzano.

Eventi tastiera JavaScript: codice

Nel seguito ti lascio alcuni estratti di codice per gestire alcuni eventi relativi all’interazione con la tastiera.

const inputField = document.querySelector("input");
const logToConsole = (keyboardEvent) => {
       console.log("keyboard event", keyboardEvent);
   };
inputField.addEventListener("keyup", logToConsole);
inputField.addEventListener("keydown", logToConsole);

Ovviamente, occorre impostare il selettore di inputField secondo le tue necessità.

Approfondimenti JavaScript

In questo blog puoi trovare numerosi articoli relativi a JavaScript ed al Web development.

Eccone alcuni:

Conclusioni

In questo articolo hai avuto modo di analizzare gli eventi JavaScript relativi all’interazione dell’utente con la tastiera.

Grazie ad un esempio interattivo, hai potuto verificare le informazioni riportate con quelle prodotte dal tuo browser.

Seguimi su