Nella scorsa lezione, abbiamo visto quali sono gli eventi del browser. In questa lezione, vediamo quali sono gli eventi della tastiera e come gestirli con jQuery.
Vediamo la lista degli eventi della tastiera.
| Evento | Descrizione |
keydown | Si verifica quando viene premuto un tasto sulla tastiera. |
keypress | Si verifica quando è stato premuto un tasto sulla tastiera. |
keyup | Si verifica quando viene lasciato un pulsate sulla tastiera. |
Approfondiamo questi eventi nei paragrafi successivi.
L'evento "keydown" si verifica quando un tasto sulla tastiera è premuto. Questo evento è innescato ogni volta che viene premuto un tasto della tastiera.
Vediamo un esempio:
$(document).on("keydown", function(event) {
alert("Tasto premuto: " + event.key);
});Nell'esempio, utilizziamo la proprietà key per conoscere il tasto premuto. Trovi le altre proprietà nell'ultimo paragrafo di questa lezione.
È possibile anche utilizzare $(elemento), ad esempio con l'ID di un input:
<input type="text" id="testo" size="10"> <p></p>
<script>
$("#testo").on("keydown", function(event) {
$("p").text("Tasto premuto: " + event.key);
});
</script>Utilizziamo il metodo .text() per inserire in <p> quale tasto è stato cliccato. Se vuoi approfondire, puoi andare nella lezione su come modificare il contenuto degli elementi.
L'evento "keypress" si verifica quando un tasto sulla tastiera è stato premuto. Tuttavia, i tasti non alfanumerici, come Shift, Maiusc, ctrl, ecc., non generano eventi "keypress".
Vediamo un esempio:
$(document).on("keypress", function(event) {
alert("Tasto premuto: " + event.key);
});Anche in questo caso, utilizziamo la proprietà key per conoscere il tasto premuto (approfondiamo nell'ultimo paragrafo di questa lezione).
È possibile anche utilizzare $(elemento), ad esempio con l'ID di un input:
<input type="text" id="testo" size="10"> <p></p>
<script>
$("#testo").on("keypress", function(event) {
$("p").text("Tasto premuto: " + event.key);
});
</script>L'evento "keyup" si verifica quando un tasto sulla tastiera è stato premuto ed è stato rilasciato. Questo evento non si verifica se il tasto non è stato lasciato.
Vediamo un esempio:
$(document).on("keyup", function(event) {
alert("Tasto premuto e rilasciato: " + event.key);
});È possibile anche utilizzare $(elemento), ad esempio con l'ID di un input:
<input type="text" id="testo" size="10"> <p></p>
<script>
$("#testo").on("keyup", function(event) {
$("p").text("Tasto premuto e rilasciato: " + event.key);
});
</script>Esistono alcune proprietà, come key che abbiamo visto negli esempi precedenti, che possiamo utilizzare per avere informazioni sui tasti premuti dall'utente.
La sintassi è nomeEvento.proprietà, in quanto questi eventi restituiscono degli oggetti.
Ecco la lista delle proprietà più importanti:
| Proprietà | Descrizione |
key | Restituisce il simbolo o il nome del tasto cliccato dall'utente. Ad esempio: "d", "Shift", " " (spazio). |
keyCode | Restituisce il numero del pulsante della tastiera. |
altKey | Restituisce true se l'utente ha cliccato Alt insieme ad un altro pulsante (ad esempio: Alt+h), altrimenti restituisce false. |
ctrlKey | Restituisce true se l'utente ha cliccato CTRL insieme ad un altro pulsante (ad esempio: CTRL+h), altrimenti restituisce false. |
shiftKey | Restituisce true se l'utente ha cliccato Shift insieme ad un altro pulsante (ad esempio: Shift+h), altrimenti restituisce false. |