185 besökare, 2 medlemmar och 1 Student är online nu
Loopia

webdesign och HTML

Kontrollera CapsLock-funktion

Lösenord anges ofta med både siffror och text. De lösenord du blivit tilldelad och inte valt själv innehåller ofta både VERSALA och gemena bokstäver som tex gaZ5pBw2Hh

Då lösenordsfältet döljer inmatade tecken ser du inte om du skrivit bokstaven med stor eller liten bokstav och det blir ofta fel om CapsLock-tangenten är aktiverad.

Javascriptet kontrollerar om CapsLock-tangenten är intryckt och meddelar användaren. Prova själv att skriva i lösenordsfälten nedan med och utan CapsLock-tangenten aktiverad:

Logga in:
Användarnamn:


Lösenord:




 

 

Steg 1:
Lägg koden inom <HEAD>

 

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
function checkCapsLock( e ) {
var myKeyCode=0;
var myShiftKey=false;

var myMsg='Observera att du har CapsLock-tangenten aktiverad!\n\nDå vissa lösenordsfunktioner kräver att du anger stor eller liten bokstav rätt kan det innebära att fel tecken anges.\nAvaktivera CapsLock och använd Shift-tangenten för bättre kontroll över om bokstaven är i versal eller gemen form.';

// Internet Explorer 4+
if ( document.all ) {
myKeyCode=e.keyCode;
myShiftKey=e.shiftKey;

// Netscape 4
} else if ( document.layers ) {
myKeyCode=e.which;
myShiftKey=( myKeyCode == 16 ) ? true : false;

// Netscape 6
} else if ( document.getElementById ) {
myKeyCode=e.which;
myShiftKey=( myKeyCode == 16 ) ? true : false;
}

// Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
alert( myMsg );

// Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
} else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {
alert( myMsg );
}
}
</script>

</HEAD>

 

Steg 2:
Lägg koden inom <BODY>

 

<BODY>

<form id="login" name="login" method="post" action="">
<fieldset style="width: 450px;">
<legend>Logga in: </legend>
<br>
Anv&auml;ndarnamn:<br>
<input name=username type=text size="40">
<br>
<br>
L&ouml;senord:<br>
<input name=password type=password size="30" onKeyPress="checkCapsLock( event )">
<br>
<br>
<input type=button value="Logga in" onClick="Login()" name="button">
<br />
<br />
</fieldset>
</form>

</BODY>

Koden ovan är ett exempel på formulär. om du använder koden i ditt befintliga formulär är det viktigt att du anger onKeyPress="checkCapsLock( event )" i koden för lösenordsfältet.