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 attivocode: è una stringa che rappresenta il tasto premuto nel layout tastiera internazionalealtKey: un valore booleano che rappresenta se il tasto alt (o option su Mac OSx) è premutoctrlKey: un valore booleano che rappresenta se il tasto ctrl (control) è premutometaKey: un valore booleano che rappresenta se il tasto meta (tasto Windows o Command o su Mac OSx) è premutoshiftKey: 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à.
Video esempio evento tastiera JavaScript
Nel seguente video implemento un visualizzatore dei tasti premuti utilizzando HTML, CSS e JavaScript.
Come hai avuto modo di vedere, utilizzo, tra le altre cose, i JavaScript keyboard events.
Se il video fosse stato interessante, potresti valutare di iscriverti al canale.
Approfondimenti JavaScript
In questo blog puoi trovare numerosi articoli relativi a JavaScript ed al Web development.
Eccone alcuni:
- Come fare una chiamata AJAX ( GET / POST )
- Bootstrap CSS: cosa è e come utilizzarlo
- a href – il tag HTML per i link
- Position Sticky CSS: guida ed esempi pratici
- Modello client server: il sistema alla base di internet
- Records DNS: cosa sono e come funzionano
- File Hosts: cosa è e come utilizzarlo
- Connessione SSH: come effettuarla da terminale
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.
