Questa è la traduzione dell'articolo Capturing Caps Lock di Stuart Langridge pubblicato originariamente su 24 Ways il 4 dicembre 2007.
Uno degli aspetti più fastidiosi del dover ricordare le password (oltre al fatto di doverne ricordare decine) è che se abbiamo premuto e attivato accidentalmente il tasto del Blocco Maiuscole (Caps Lock), quando scriviamo la password non funzionerà e per un po' staremo lì a chiederci perché. La maggior parte dei computer ci avvisano in qualche modo se stiamo provando ad inserire una password e abbiamo attivato il Blocco Maiuscole. Non c'è ragione perché sul web non possa accadere la stessa cosa. Quello che vogliamo è un avviso piuttosto che qualcosa che interrompa quello che stiamo facendo (forse l'utente ha il Blocco Maiuscole attivato perché la sua password è in effetti in lettere maiuscole). Un qualcosa di gentile.
Ma tutto ciò non risponde alla domanda relativa al come implementare un sistema del genere. Purtroppo, attualmente non esiste un modo per verificare direttamente se il Blocco Maiuscole è attivato. C'è comunque un semplice trucchetto per aggirare l'ostacolo. Se l'utente preme un tasto ed è una lettera maiuscola e il tasto Shift non è stato premuto, allora deve aver per forza attivato il Blocco Maiuscole! Semplice.
Lo scripting del DOM consente al nostro codice di ricevere notifiche su quando un certo tasto viene premuto nel contesto di un elemento. Quando il tasto viene premuto, otteniamo il codice ASCII per quel tasto. Le lettere maiuscole, da A a Z, hanno i codici da 65 a 90. Il codice sarà dunque simile a questo:
alla pressione di un tasto
se
il codice ASCII per quel tasto è compreso tra 65 e 90 *e* se il tasto Shift è premuto
avvisa l'utente il Blocco Maiuscole è attivato, ma lascialo proseguire
end if
end keypress
Il Javascript reale è un po' più complicato perché sia la gestione degli eventi sia la cattura delle informazioni sui tasti premuti differiscono da browser a browser. Le funzioni per la gestione degli eventi sono passate ad un oggetto evento, tranne che su Internet Explorer, dove si usa l'oggetto evento globale. L'oggetto evento ha un parametro 'which' che contiene il codice ASCII del tasto premuto, tranne che su Internet Explorer, dove l'oggetto evento ha un parametro 'keyCode'. Alcuni browser memorizzano se il tasto Shift è premuto in un parametro 'shiftKey', altri in un diverso parametro. Da tutto ciò deriva il codice che segue:
keypress: function(e) {
var ev = e ? e : window.event;
if (!ev) {
return;
}
var targ = ev.target ? ev.target : ev.srcElement;
// cattura il tasto premuto
var which = -1;
if (ev.which) {
which = ev.which;
} else if (ev.keyCode) {
which = ev.keyCode;
}
// cattura lo stato del tasto Shift
var shift_status = false;
if (ev.shiftKey) {
shift_status = ev.shiftKey;
} else if (ev.modifiers) {
shift_status = !!(ev.modifiers & 4);
}
// Ora abbiamo il codice ASCII in "which",
//e lo stato del tasto Shift è true se è premuto
}
Poi bisogna solo verificare se il codice ASCII è compreso tra 65 e 90 e il tasto Shift è premuto (lo stesso lavoro va fatto se il codice ASCII è tra 97 (a) e 122 (z) e il tasto Shift non è premuto, perché le lettere scritte premendo Shift con il Blocco Maiuscole attivato sono minuscole):
if (((which >= 65 && which <= 90) && !shift_status) ||
((which >= 97 && which <= 122) && shift_status)) {
// uppercase, no shift key
/* MOSTRA l'avviso */
} else {
/* NASCONDI l'avviso */
}
L'avviso può essere implementato in molti modi diversi: evidenziare il campo della password in cui l'utente sta scrivendo, mostrare un tooltip, mostrare del testo accanto al campo. Per semplicità, questo codice mostra l'avviso sotto forma di un'immagine precedentemente creata, con un testo alternativo (alt) appropriato. Mostrare l'avviso significa creare un nuovo tag <img> con il DOM, inserire l'immagine nella pagina, posizionarla in modo che sia vicino al campo della password. L'immagine è simile a questa:
Conosciamo la posizione del campo in cui l'utente sta scrivendo (attraverso le sue proprietà offesetTop e offsetLeft) e quanto è largo (dalla proprietà offsetWidth), così usiamo createElement per inserire il nuovo elemento img, e poi lo posizioniamo assolutamente con le proprietà di stile adatte in modo che appaia nella posizione giusta (vicino al campo della password).
L'immagine è una PNG trasparente con un canale alfa, in modo che un'ombreggiatura la renda più accattivante in qualunque posizione appaia. Dato che Internet Explorer 6 non gestisce correttamente le PNG trasparenti, usiamo la tecnica dell'AlphaImageLoader:
newimage = document.createElement('img');
newimage.src = "http://farm3.static.flickr.com/2145/2067574980_3ddd405905_o_d.png";
newimage.style.position = "absolute";
newimage.style.top = (targ.offsetTop - 73) + "px";
newimage.style.left = (targ.offsetLeft + targ.offsetWidth - 5) + "px";
newimage.style.zIndex = "999";
newimage.setAttribute("alt", "Warning: Caps Lock is on");
if (newimage.runtimeStyle) {
// PNG transparency for IE
newimage.runtimeStyle.filter += "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://farm3.static.flickr.com/2145/2067574980_3ddd405905_o_d.png',sizingMethod='scale')";
}
document.body.appendChild(newimage);
Notate che il testo alt è anche impostato. Poi, tutte queste parti devono essere messe insieme. Al caricamento della pagina, si identificano tutti i campi password presenti sulla pagina, ad ognuno attacchiamo un gestore per il tasto premuto:
var inps = document.getElementsByTagName("input");
for (var i=0, l=inps.length; i
Il codice per creare l'immagine visto sopra dovrebbe essere eseguito solo se l'immagine non è stata già mostrata. Così, invece di creare un oggetto newimage, creiamo l'immagine e associamola al campo della password in modo che si possa fare la verifica della sua visualizzazione avvenuta (o non avvenuta). Per sicurezza, tutto il codice dovrebbe essere inglobato all'interno del suo oggetto, in modo che le sue funzioni non interferiscano con altre. Così, creiamo un oggetto capslock e rendiamo tutte le funzioni come metodi dell'oggetto:
var capslock = {
...
keypress: function(e) {
}
...
}
Inoltre, il codice per creare l'immagine viene salvato in una funzione, show_warning, e il codice inverso, quello per rimuovere l'immagine, nella funzione hide_warning. Ciò ha il vantaggio che lo sviluppatore può includere la libreria Javascript appena realizzata, ma sostituire quanto accade con il proprio codice, usando qualcosa come questa:
<script src="jscapslock.js" type="text/javascript"></script>
<script type="text/javascript">
capslock.show_warning(target) {
// do something different here to warn the user
}
capslock.hide_warning(target) {
// hide the warning that we created in show_warning() above
}
</script>
Ecco tutto. Includete semplicemente la libreria Javascript, modificate se volete quello che accade al momento di avvisare l'utente: è tutto quello che dovete fare.
Stuart Langridge è uno sviluppatore web, autore e speaker che vive nel Regno Unito. Quando non scrive libri su Javascript o non convince la gente a usare Ubuntu, si occupa della DOM Scripting Task Force del WaSP (di cui è uno dei fondatori) e di tenere qualche show su LugRadio, il miglior show radofonico dedicato all'Open Source. Il suo codice e quanto scrive di tanto in tanto si trovano su kryogenix.org.
