Eventi della tastiera

Anche in questo articolo riportiamo gli eventi che si verificano quando l’utente interagisce con la tastiera.
Gli eventi associati alla tastiera sono soltanto tre:

keydown	L’utente ha premuto un tasto (si ripete se il tasto viene mantenuto premuto)
keyup	L’utente ha rilasciato un tasto
keypress	Sta per essere inserito un carattere (si ripete se il tasto viene mantenuto premuto)

Principali differenza tra gli eventi

Ecco i tre eventi della tastiera supportati da tutti i principali browser, nell'ordine in cui vengono attivati:

• keydown– si attiva quando viene premuto un tasto qualsiasi, si attiva per primo e sempre prima che il browser elabori il tasto.
• keypress– si attiva quando viene premuto un tasto che produce un valore di carattere, si attiva dopo keydown e prima che il browser elabori il tasto.
• keyup– si attiva quando viene rilasciato un tasto qualsiasi, si attiva per ultima e il browser elabora la chiave.

Tendenzialmente è opportuno l'utilizzo dell'evento "keydown" in quanto con esso è possibile tracciare la pressione anche dei tasti modificatori come Shift, Control, Alt/Meta, tasti funzione, ecc.
Inoltre il metodo "keypress" non dispone di una compatibilità cross-browser totale.

Il metodo "keyup" potrebbe tornaci utile per messaggi da inviare all'utente quando sospende la digitazione es. "Ehi continua a scrivere il tuo articolo.."

Proprietà aggiuntive dell’oggetto “Event”

Anche nella gestione degli eventi scatenati mediante la tastiera da parte dell'utente esistono alcune proprietà aggiuntive dell'oggetto evento. Le proprietà ci consentono di individuare il valore dell'input ricevuto dalla tastiera.

Note: In alcune documentazioni online tali proprietà, così come avveniva con gli eventi del mouse (Obj MouseEvent), saranno indicate come appartenenti all'oggetto "KeyboardEvent".

Proprietà	Descrizione
event.keyCode event.code	indica quale tasto è stato premuto sotto forma di codice ASCII. L'oggetto String ha un metodo adatto alla conversione .fromCharCode().
event.charCode	indica quale tasto è stato premuto sotto forma di codice Unicode. E' possibile utilizzare anche per questa proprietà String.fromCharCode();
event.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
event.shiftKey	valore booleano che indica se è stato premuto il tasto SHIFT
event.ctrlKey	valore booleano che indica se è stato premuto il tasto CTRL
event.altKey	valore booleano che indica se è stato premuto il tasto ALT
event.metaKey	valore booleano che indica se è stato premuto il tasto meta (tasto Windows sui sistemi operativi Microsoft o tasto Command su Mac)

ASCII VS Unicode

ASCII (acronimo di American Standard Code for Information Interchange, letteralmente "codice standard americano per lo scambio di informazioni") è un codice per la codifica di caratteri.
Con US-ASCII si intende un sistema di codifica dei caratteri a 8 bit, comunemente utilizzato nei calcolatori.
In informatica, ASCII e Unicode sono due codifiche di caratteri. Fondamentalmente, sono standard su come rappresentare i caratteri di differenza in binario in modo che possano essere scritti, memorizzati, trasmessi e letti nei media digitali.
Attualmente il sistema di codifica più utilizzato a livello globale è Unicode che rappresenta l'evoluzione del codice ASCII. Si tratta di un codice che può essere programmato con variabili da 32, 16 ed 8 bit.
 I primi 128 caratteri di Unicode sono uguali alla tabella di base di ASCII. 

Per scrivere un carattere ASCII/Unicode dovremmo utilizzare la seguente combinazione di tasti:
tenere premuto ALT e digitare il numero sul tastierino numerico.

L'Evento "keypress"

ATTENZIONE: Su dispositivo mobile non essendoci "fisicamente" una tastiera anzichè utilizzare l'evento "keypress" e gli eventi-tastiera dovremmo utilizzare gli eventi per la gestione dei moduli (es."input") 

Chiarita la differenza tra le diverse tipologie di codifica caratteri facciamo degli esempi su come è possibile utilizzare queste nuove proprietà dell'oggetto event e nello specifico con l'evento keypress

Limitare l'immissione di caratteri

var campoTesto = document.getElementById('inserisciTesto');
var campoNotifica = document.querySelector('p.notifica');

campoTesto.addEventListener('keypress', function(event){
if(event.target.value.length>=10){
campoNotifica.innerHTML="Puoi inserire massimo 10 caratteri";
event.preventDefault();
}
});

Nell'esempio qui sopra abbiamo utilizzato l'evento keypress che monitora "l'inserimento-continuo" di caratteri; attraverso la proprietà event.target, che recupera l'elemento su cui agisce l'azione, abbiamo recuperato il suo valore ".value", essendo esso un campo di input, e la sua lunghezza ovvero il numero di caratteri immessi.
Abbiamo inoltre inserito all'interno dell'istruzione if, che controlla la condizione "non più di 10 catatteri", event.preventDefault;
questo per prevenire il comportamento predefinito di un campo di input.
Il comportamento di un campo di input predefinito è quello di consentirci di inserire tutto il testo che desideriamo; è importante inserirlo all'interno di if in quanto al verificarsi di tale condizione, il comportamento di default, deve essere fermato.

Consentire solo caratteri numerici

var campoTesto2 = document.getElementById('inserisciTesto2');
var campoNotifica2 = document.querySelector('p.notifica2');

campoTesto2.addEventListener('keypress', function(event){
var keyCode = event.keyCode;
if(keyCode< 48 || keyCode> 57){
campoNotifica2.innerHTML="Sono consentiti solo numeri";
event.preventDefault();
}
});

Con la proprietà dell'oggetto event.keyCode recuperiamo il valore del tasto premuto dall'utente; nell'istruzione if impostiamo un range di valori che coincidono con i valori numerici della codifica UNICODE/ASCII.
Infine se la condizione non è rispettata viene prevenuto il comportamento standard del campo input.

Scrittura dinamica

var campoTesto3 = document.getElementById('inserisciTesto3');
var campoNotifica3 = document.querySelector('p.notifica3');

var insiemeCaratteri= [];

campoTesto3.addEventListener('keypress', function(event){
var keyCode = String.fromCharCode(event.keyCode);
insiemeCaratteri.push(keyCode);
var caratteriInseriti = insiemeCaratteri.join();
campoNotifica3.innerHTML=`L'utente ha inserito i seguenti caratteri: ${caratteriInseriti}`;
});

In questo esempio abbiamo utilizzato i metodi per gli array .push() e .join(); è importante fare attenzione alla loro posizione per far si che funzioni tutto correttamente.
La proprietà .keyCode ci restituisce il valore del tasto premuto dall'utente in formato UNICODE/ASCII mentre il metodo delle stringhe String.formChartCode() lo codifica in modo che sia stampabile su video.

L'evento "keydown"

Gli esempi precedenti a questo che abbiamo visto sviluppati con l'evento "keypress" si sarebbero potuti sviluppare anche con "keydown";
nell'esempio corrente siamo obbligati ad utilizzare "keydown" perchè abbiamo bisogno di monitorare la pressione dei tasti CRTL, ALT ecc. che l'evento "keypress" ci impedisce di fare.

Combinazione di tasti

var campoTesto4 = document.getElementById('inserisciTesto4');
var campoNotifica4 = document.querySelector('p.notifica4');

campoTesto4.addEventListener('keydown', function(event){
if (event.keyCode == 80 && event.ctrlKey) {
var keyCode = String.fromCharCode(event.keyCode);
campoNotifica4.innerHTML=`Sono stati premuti contemporaneamente i tasti: CTRL + ${keyCode}`;
event.preventDefault();
}
});

Abbiamo sfruttiamo l'evento keydown, dal momento che la combinazione di tasti non produce un carattere è importante inibire l'eventuale comportamento predefinito del browser event.preventDefault(), dal momento che i browser associano a queste combinazioni diverse azioni (es. inserire la pagina tra i preferiti ecc.)

L'evento "keyup"

Proviamo ad utilizzare l'evento "keyup" per sollecitare il non-rilascio di un tasto

var campoTesto5 = document.getElementById('inserisciTesto5');
var campoNotifica5 = document.querySelector('p.notifica5');

campoTesto5.addEventListener('keyup', function(event){
window.setTimeout(function(){
campoNotifica5.innerHTML="Ehi continua a tenere premuto il tasto!";
},1500);
});

L'evento "keyup" viene attivato quando un tasto viene rilasciato; nell'esempio abbiamo impostato un ritardo con il metodo .setTimeout() di window e fatto comparire un messaggio di sollecito.