Question

81

How do I detect the CAPS LOCK state in a password field

rated 0 times [ 85] [ 4] / answers: 1 / hits: 16222 / 14 Years ago, wed, january 26, 2011, 12:00:00

Possible Duplicate:

How do you tell if caps lock is on using JavaScript?

In a web form, is there any way to tell if the caps lock is on ?

I suppose I could check do a check onChange to see if all the characters are upper case. But is there a more direct way to do this?

Specifically, I am looking to implement a YOUR CAPS LOCK IS ON message when they enter the password field, similar to how the windows login screen does .

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brennanm

Add To Favorites

Follow

Total Points: 510

Total Questions: 103

Total Answers: 95

Location: Nicaragua

Member since Tue, Dec 8, 2020

4 Years ago

brennanm questions

1 How to create two dependent dynamic dropdown lists using Flask

Thu, Aug 19, 21, 00:00, 3 Years ago

1 Error in v-on handler: TypeError: Cannot read property 'emit' of null

Mon, May 18, 20, 00:00, 4 Years ago

1 Run sequelize migrates in docker compose

Thu, Jan 9, 20, 00:00, 5 Years ago

1 Javascript create array of objects of length n

Thu, Sep 26, 19, 00:00, 5 Years ago

1 input search filter array using hooks

Thu, Aug 29, 19, 00:00, 5 Years ago

View All

answered 14 Years ago dahlias · Accepted Answer

You can find a decent example of how to do this here: http://www.codeproject.com/KB/scripting/Detect_Caps_Lock.aspx

You could take that code and wrap it into a different kind of event, either, i.e. onfocus or on document load.

You can google for an index of key codes (I'd post a link, but I don't have high enough karma to post more than one link, sorry).

For simplicity the codes you'd be looking for is 20 (Caps lock).

Instructions copied here from site (license: CPOL)

Building the script

<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('divMayus').style.visibility = 'visible';

 else

  document.getElementById('divMayus').style.visibility = 'hidden';

}

</script>

Now we have our script ready to go. We now need to associate this script with our form.

Using the script

Let's add two items: a textbox and a DIV. Now we just need to call the onKeyPress event.

<input type=password name=txtPassword onkeypress=capLock(event) />

<div id=divMayus style=visibility:hidden>Caps Lock is on.</div>