In this tutorial we will see how to notify the user whether the capslock is on/off when he/she is typing the password. This is very simple to understand and use example of that. You can complete this task using JavaScript described below.
Add this JavaScript in page before </head> tag. If you are using any external JavaScript than u can add capLock() function to that .js file.
<script language="Javascript">
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divCaps').style.visibility = 'visible';
else
document.getElementById('divCaps').style.visibility = 'hidden';
}
</script>
Now, add this event onkeypress="capLock(event)" to the control. In my example, u can see that I have used it in textbox.
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divCaps" style="visibility:hidden">Caps Lock is on.</div>
Here, the capLock() function checks whether the capslock is on or off on the users pc and according to that it set the visibility of the div ‘divCaps’.