How can I detect if CAPS LOCK STATUS is active without press any key using JS?

Question

I want to detect if caps lock is active using on focus event in input element but without any press key like the behavior that is having the input password type for IE. For IE when you are focus in this kind of input password appears a warning tooltip if the user has active caps lock even if the user has not pressed any key that what I want to do using JS. Now my code is just working with the keypress event

 $(function() {//check caps lock on 
                var isIE = !isIE && !!window.StyleMedia;
                if (isIE == true) {
                    document.msCapsLockWarningOff = true;
                }            
                    $('#Password').keypress(function (key) {
                        if (key.charCode >= 65 && key.charCode <= 90)
                            $('#capLockOn').tooltip('show');
                        else {
                            $('#capLockOn').tooltip('hide');
                        }
                        //Hide the tooltip when moving away from the password field
                        $('#Password').blur(function (e) {
                            $('#capLockOn').tooltip('hide');
                        });
                    });

            });

I would like to add the warning without any native warning of browser for keep a consistent design Any advice please...

Possible duplicate of [How do you tell if caps lock is on using JavaScript?](http://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript) — aug, Oct 19 '16 at 16:26
Thanks for responses but all examples in there are for keypress , I know that I should to use on on focus event but what I need to know is how to detect the status of caps lock,. and I would like to add the warning without any native warning of browser for keep a consistent design — UserEsp, Oct 19 '16 at 16:38

alexandradeas · Answer 1 · 2016-10-19T16:53:41.403

3

You can use KeyboardEvent.getModifierState('CapsLock');. Which will return the current state of a modifier key (MDN Docs).

$('#inputBox').addEventListener('focus', function(e) {
  e.getModifierState('CapsLock');
});

This will give you the current state of the Caps Lock modifier when the user focuses on whatever you want.

edited Oct 19 '16 at 16:53

answered Oct 19 '16 at 16:48

alexandradeas

100
4

1

Good idea, as long as [you don't need to support Safari for a while](http://caniuse.com/#search=getModifierState) – Heretic Monkey Oct 19 '16 at 16:53
True, although it looks like this is intended for IE. I believe this is native behaviour for Safari – alexandradeas Oct 19 '16 at 16:55
Thanks for the answer I'm doing something wrong i'm getting "Uncaught TypeError: $(...).addEventListener is not a function" cuz i'm getting an array so I tried $('#Password')[0].addEventListener('focus', function (e) but I got "e.getModifierState is not a function" . then I tried e.originalEvent.getModifierState('CapsLock'); but I still getting error any clue please. – UserEsp Oct 19 '16 at 18:36
getModifierState is great for this but focus is not an event for addEventLister http://stackoverflow.com/questions/40156072/how-can-use-getmodifierstate-on-focus-event-with-js – UserEsp Oct 20 '16 at 14:29
3

`getModifierState` is currently only available on `KeyboardEvent`s and `MouseEvent`s and does not work for `focus` – Eli Dec 15 '17 at 16:04

How can I detect if CAPS LOCK STATUS is active without press any key using JS?

1 Answers1