disign.it | Javascript: intercettare il blocco maiuscolo attivato | a digital sign for a best design!
A digital sign for a best design
Javascript 2.637 visualizzazioni

Javascript: intercettare il blocco maiuscolo attivato

09/01/2012

Uno degli errori più frequenti quando si digitano dei dati all'interno di un form è quello di non accorgersi se il blocco maiuscole è attivato, e quindi non poter accedere perché la password non corrisponde o registrarsi con una password che -se case sensitive- non corrisponderà a quella che pensiamo di aver inserito!
Un piccolo accorgimento facile facile è utilizzare javascript per fare un controllo sul blocco maiuscole che avverta l'utente impedendo errori inconsapevoli.


L'autore dello script è Mark Wilton-Jones, qui potete trovare i suoi script.

Prima di tutto nell'head del documento html richiamiamo il javascript (in tutte le istruzioni le parentesi quadre vanno sositutite con le parentesi angolari):


[script src="capsDetect.js" type="text/javascript"][/script]

Lo script funziona settando il parametro del messaggio di alert nell'head del nostro documento html:


[script type="text/javascript"]
    var capsError = 'Attenzione ha il blocco maiuscole attivato!';
[/script]



 Il javascript che detecta il blocco maiuscole (contenuto nel file capsDetect.js) è questo:

function capsDetect( e ) {
    if( !e ) { e = window.event; } if( !e ) { MWJ_say_Caps( false ); return; }
    //what (case sensitive in good browsers) key was pressed
    var theKey = e.which ? e.which : ( e.keyCode ? e.keyCode : ( e.charCode ? e.charCode : 0 ) );
    //was the shift key was pressed
    var theShift = e.shiftKey || ( e.modifiers && ( e.modifiers & 4 ) ); //bitWise AND
    //if upper case, check if shift is not pressed. if lower case, check if shift is pressed
    MWJ_say_Caps( ( theKey > 64 && theKey < 91 && !theShift ) || ( theKey > 96 && theKey < 123 && theShift ) );
}
function MWJ_say_Caps( oC ) {
    if( typeof( capsError ) == 'string' ) { if( oC ) { alert( capsError ); } } else { capsError( oC ); }
}

 

Infine ad ogni campo del modulo su cui vogliamo far il controllo dobbiamo applicare il controllo sull'evento keypress

 [input type="password" size="20" name="pwd" onkeypress="capsDetect(event);"]

← CSS: bordo trasparente interno Form tableless →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.