logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Eventi della tastiera

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.

Lista degli eventi della tastiera

Vediamo la lista degli eventi della tastiera.

EventoDescrizione
keydown Si verifica quando viene premuto un tasto sulla tastiera.
keypress Si verifica quando è stato premuto un tasto sulla tastiera.
keyupSi verifica quando viene lasciato un pulsate sulla tastiera.

Approfondiamo questi eventi nei paragrafi successivi.

L'evento "keydown"

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"

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"

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>

Proprietà per gli eventi "keydown", "keypress" e "keyup"

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.
altKeyRestituisce true se l'utente ha cliccato Alt insieme ad un altro pulsante (ad esempio: Alt+h), altrimenti restituisce false.
ctrlKeyRestituisce true se l'utente ha cliccato CTRL insieme ad un altro pulsante (ad esempio: CTRL+h), altrimenti restituisce false.
shiftKeyRestituisce true se l'utente ha cliccato Shift insieme ad un altro pulsante (ad esempio: Shift+h), altrimenti restituisce false.

Prova!Scegli l'opzione corretta tra quelle elencate.
// Attiva la funzione quando l'utente preme e rilascia un tasto della tastiera
$("input").on("___"), function(event) {
  funzione();
});

Prova!Completa gli spazi vuoti con il testo appropriato.
// Scopri se l'utente ha cliccato Shift+H

$("input").on("keydown"), function(event) {
  if(event.=="H" && event.==true){
    alert("Hai cliccato Shift+H");
  }
});