Check for CapsLock ON in "onfocus" event

Question

My following code for checking whether Capslock is on or not works fine on "onkeypress" event.

But i want it for "onfocus" event. i tried replacing "onkeypress" with "onfocus" for the control,but it doesnt work for me.

Any help? (either in javascript or Jquery)

 <script type="text/javascript" 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>

<input type="text" name="txtuname" />
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>

the above link ask about capslock detect code...here im asking on other event..i have the code...but i need it in another event — Santosh, Aug 09 '12 at 12:20

score 5 · Accepted Answer · answered Dec 13 '12 at 13:15

There is a jQuery plugin called capslockstate which will keep track of the state of the caps lock key, allowing you to use that information as and when needed.

It will monitor the state for the entire page, and then you can retrieve the state when the desired element gains focus.

It's also based on watching key presses, but not limited to lower ASCII characters and handles situations like the Caps Lock key itself being pressed.

Your situation would become something like:

<script src="{path-to}/jquery-capslockstate.js"></script>
<script>
    $(document).ready(function() {
        $(window).capslockstate();

        $(window).bind("capsOn", function(event) {
            if ($("#txtPassword:focus").length > 0) {
                document.getElementById('divMayus').style.visibility = 'visible';
            }
        });
        $(window).bind("capsOff capsUnknown", function(event) {
            document.getElementById('divMayus').style.visibility = 'hidden';
        });
        $("#txtPassword").bind("focusout", function(event) {
            document.getElementById('divMayus').style.visibility = 'hidden';
        });
        $("#txtPassword").bind("focusin", function(event) {
            if ($(window).capslockstate("state") === true) {
                document.getElementById('divMayus').style.visibility = 'visible';
            }
        });
    });
</script>

<input type="text" name="txtuname" />
<input type="password" name="txtPassword" id="txtPassword" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>

Note that I've only jQueryified the essential bits, more could still be done.

@mondjunge that is happening because I have hot linked the is from Github. They don't want people doing that, and have added some headers to prevent it. However Firefox is the only browser currently that respects the headers. When properly hosted the script works on all browsers. — nosilleg, Aug 02 '13 at 23:48
@mondjunge I've finally gotten around to fixing the demo by using a non-blocked version of the js. Thanks for reporting this, oh so long ago. — nosilleg, Jan 14 '14 at 00:28

score 1 · Answer 2 · answered Aug 09 '12 at 10:49

1

Unfortunately not - the keyCode property of the event object is only sent on key-based events (for obvious reasons), which is why it wouldn't work onfocus, onclick etc.

There aren't any other JavaScript ways of doing it - although there is a potential solution if you use flash - but that seems somewhat overkill for your requirements...

answered Aug 09 '12 at 10:49

Liam Wiltshire

1,254
13
26

http://forums.adobe.com/message/3349870 - that discusses doing it with flash - having a small swf that displays a message if caps lock is on is really your only way to go. – Liam Wiltshire Aug 09 '12 at 16:08

score 0 · Answer 3 · answered Aug 09 '12 at 12:05

0

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/

answered Aug 09 '12 at 12:05

gaurang171

9,032
4
28
30

score 0 · Answer 4 · edited Aug 01 '23 at 11:24

It is quite simple .. use mousedown instead of focus..

#Code to detect capsLock is ON when we put mouse inside input field...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inputme">
    <p id="log" style="color:red"></p>
    <script>
        function checkCapsLock(e) {
          if (e.getModifierState('CapsLock'))
              log.textContent = `capsLock is ON!`;
          else 
              log.textContent = ``;
        }
        inputme.addEventListener('mousedown', checkCapsLock);
        inputme.addEventListener('keyup', checkCapsLock);
    </script>
</body>
</html>

Check for CapsLock ON in "onfocus" event

4 Answers4

Linked