Eventi della tastiera

L'inserimento di caratteri tramite la tastiera genera alcuni eventi che può essere utile gestire in diversi contesti applicativi: dalla validazione dell'input alla sua trasformazione o all'intercettazione di combinazione di tasti.

Gli eventi associati alla tastiera sono soltanto tre:

Campo	Descrizione
keydown	si verifica quando inizia la pressione su un tasto
keypress	si verifica al completamento della pressione sul tasto
keyup	si verifica quando il tasto viene rilasciato

Una distinzione fondamentale tra gli eventi keydown e keypress sta nel fatto che mentre il primo si verifica in corrispondenza della pressione su qualsiasi tasto, il secondo si verifica soltanto in corrispondenza della pressione su tasti alfanumerici. In altre parole, quando premiamo, ad esempio, sui tasti CTRL o SHIFT si verifica l'evento keydown ma non l'evento keypress.

L'oggetto Evento

Nella gestione degli eventi di tastiera giocano un ruolo fondamentale alcune proprietà dell'oggetto evento. In particolare le seguenti proprietà ci consentono di individuare il valore dell'input ricevuto dalla tastiera:

Proprietà	Descrizione
keyCode	indica il codice di scansione del tasto, cioè il codice associato al tasto di una tastiera indipendentemente dall'eventuale carattere associato
charCode	indica il codice ASCII associato al tasto; questa proprietà viene valorizzata soltanto in corrispondenza dell'evento keypress
which	restituisce un valore numerico che identifica il tasto premuto sia che si tratti di un tasto alfanumerico che non alfanumerico; il valore restituito è una combinazione delle proprietà keyCode e charCode
shiftKey	valore booleano che indica se è stato premuto il tasto SHIFT
ctrlKey	valore booleano che indica se è stato premuto il tasto CTRL
altKey	valore booleano che indica se è stato premuto il tasto ALT
metaKey	valore booleano che indica se è stato premuto il tasto meta (tasto Windows sui sistemi operativi Microsoft o tasto Command su Mac)

Vediamo qualche esempio di utilizzo di questi eventi per gestire l'input da tastiera.

Esempi

Il seguente codice limita a dieci il numero di caratteri ammessi in una casella di testo:

var txtInput = document.getElementById("txtInput");  
txtInput.onkeypress = function(e) {
	if (e.target.value.length >= 10) e.preventDefault();
}

Abbiamo utilizzato il metodo preventDefault() per inibire il comportamento predefinito del browser dopo il decimo carattere, cioè l'aggiunta del nuovo carattere alla stringa già visualizzata sulla casella di testo.

Il seguente esempio fa in modo da consentire esclusivamente l'immissione di caratteri numerici:

txtInput.onkeypress = function(e) {   
	var charCode = e.which;
	if (charCode < 48 || charCode > 57) e.preventDefault();
}

In questo caso abbiamo individuato il codice del carattere tramite la proprietà which dell'evento ed inibito l'immissione di caratteri non numerici.

Possiamo anche modificare il valore dell'input, ad esempio convertirlo in maiuscolo, come mostrato nel seguente esempio:

txtInput.onkeypress = function(e) {   
	var charCode = e.which;
	var char;
	if (charCode != 0) {
		char = String.fromCharCode(charCode);
		e.target.value = e.target.value + char.toUpperCase();
		e.preventDefault();
	}
}

Nell'esempio convertiamo il codice del carattere nella corrispondente stringa tramite il metodo fromCharCode() e appendiamo la sua versione in maiuscolo al valore corrente della casella di testo. L'immancabile chiamata a preventDefault() evita la visualizzazione del carattere minuscolo sulla casella.

Combinazioni di tasti

Possiamo associare ad un elemento combinazioni di tasti che hanno un comportamento speciale. Ad esempio, possiamo fare in modo che alla combinazione di tasti CTRL+D corrisponda la rimozione del testo inserito in una casella di testo, come mostrato dal seguente esempio:

txtInput.onkeydown = function(e) {
	if (e.keyCode == 68 && e.ctrlKey) {
		e.target.value = "";
		e.preventDefault();
	}
}

In questo caso sfruttiamo l'evento keydown, dal momento che la combinazione di tasti non produce un carattere. Se il tasto premuto è quello corrispondente alla lettera D ed è stato contemporaneamente premuto il tasto CTRL, allora eliminiamo il contenuto della casella di testo. Ancora una volta è importante inibire l'eventuale comportamento predefinito del browser, dal momento che diversi browser associano alla combinazione di tasti CTRL+D l'inserimento della pagina corrente nei bookmark.