Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Notify users about Caps Lock on while logging in

For security measures in every login form you can't see password which you are entering, thus you don't know if you enter it right. Of course there is a probability that you miss typed it, and that's why you can't log in. But what if you type it for the third time, and you know that you typed the right password? Well then probably your Caps Lock is on.

Here is a code snippet which will notify user that Caps Lock is on while entering password:

<table border='0'>
<tr><td>Login: </td><td><input type="text"/></td></tr>
<tr><td>Password: </td><td><input type="password" 
        onkeypress="check_CapsLock(event)"/></td></tr>
<tr><td colspan='2'>
<div id="caps_lock" style="color:red; font-weight:bold; display:none;">
Caps Lock is on!!!
</div>
</td><tr>
</table>
<script type="text/javascript">
function check_CapsLock(e)
{
    //so basic idea is to check if you are typing Uppercase letters 
    //and not holding shift button (and vice versa)
    keycode = e.keyCode?e.keyCode:e.which;
    shift = e.shiftKey?e.shiftKey:((keycode == 16)?true:false);
    if(((keycode >= 65 && keycode <= 90) && !shift)||
        ((keycode >= 97 && keycode <= 122) && shift))
    {
        document.getElementById('caps_lock').style.display = 'block';
    }
    else
    {
        document.getElementById('caps_lock').style.display = 'none';
    }
}
</script>

And here you can try it your self (works on a password field):

Login:
Password:

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus