Is it possible to detect if 'capslock is on' in a click event in jquery?

Question

I would like to know if it is possible to detect the state of caps lock key using jquery and without any key press.

Let me be more clear. I have a password field. When I just click on it or when the password field is on focus, I need to display a warning message if the caps lock is on (similar to windows login). I know about the method of comparing character codes, but that is not what i need.

This is for a Yii application. So if it have any default function to check caps lock state, please let me know.

Any help will be highly appreciated..!

Thanks..!

You want to detect if capslock is on even without the user hitting any key ? I'm not sure this is possible in JavaScript. — Denys Séguret, May 13 '13 at 06:19
http://stackoverflow.com/questions/11881359/check-for-capslock-on-in-onfocus-event check this post — muneebShabbir, May 13 '13 at 06:20
I think I was wrong to vote to close this question, it's not a duplicate. — Denys Séguret, May 13 '13 at 06:21
I dont think it will be possible to check the state without actually the key... even I will curious for answer to see how it can be done.. :) — alwaysLearn, May 13 '13 at 06:28
Some browsers (at least Chrome and Safari) already show an icon in the password field when the user has caps lock on. — JJJ, May 13 '13 at 07:38

score 1 · Answer 1 · answered May 13 '13 at 06:32

In JavaScript in a browser, you either have a solution based on what is provided to you by the browser in the standard API or you don't.

In this case, there is no direct access to the state of the keyboard so the answer is no : you can't do better than displaying your message when the user hit a key.

score 0 · Answer 2 · answered May 13 '13 at 06:19

0

Google search showed this. I don't thing you can check the status directly thought. So you'd find out only after a letter is typed.

http://capslock.mclean.ws/

So to answer your question: Is it possible to detect if 'capslock is on' in a click event in jquery - No!

answered May 13 '13 at 06:19

Miro

8,402
3
34
72

This looks like the usual solution, using the key event. So not what OP needs. – Denys Séguret May 13 '13 at 06:20

rahul maindargi · Answer 3 · 2013-05-13T06:57:38.943

Use this

document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
    e = e || event;
    if (typeof (window.lastpress) === 'undefined') {
        window.lastpress = e.timeStamp-51; 
     }

        if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
            if (typeof (window.capsLockEnabled) !== 'undefined') {
                window.capsLockEnabled = !window.capsLockEnabled;
            }
            if(!$(document).data("capsOn")){
              $(document).data("capsOn", true);
            }else{
              $(document).data("capsOn", false);
            }
        }
        window.lastpress = e.timeStamp;
        //sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem


};

and then below code

$("#password").click(function(){
if($(document).data("capsOn")){
 alert("CAPS ON");
}
});

DEMO

Doesn't work if the caps lock is already on when the user enters the page, and even if they press it while on the page it's very unreliable. It gives the alert seemingly at random. — JJJ, May 13 '13 at 07:42
working for me every time .."except caps lock is already on when the user enters the page " — rahul maindargi, May 13 '13 at 12:45

Ganesh Bora · Answer 4 · 2013-05-13T06:31:20.393

-1

try using jquery plugin for caps lock http://capslock.mclean.ws/

Its seems impossible to detect caps lock onfocus I think this may help you please visit this

http://jaspreetchahal.org/jquery-caps-lock-detection-plugin/

edited May 13 '13 at 06:31

answered May 13 '13 at 06:22

Ganesh Bora

1,133
9
17

1

That would need a keypress. But it may well be the OP's only option. – T.J. Crowder May 13 '13 at 06:23
Hi,But I need to detect the caps lock state prior to any key press. I just want to know if this is possible. – tanuja90 May 13 '13 at 06:24

Is it possible to detect if 'capslock is on' in a click event in jquery?

4 Answers4