How to detect Caps Lock is ON on web browser on Android Devices using JavaScript?

Question

We can very well detect CapsLock is ON/not on iPhone web browser using KeyboardEvent.getModifierState(), with sample code,

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    alert("Caps ON");
  }
}

But it doesn't work on a browser on Android Devices. I've tried many other solutions using charCode, keyCode, shiftKey, which, etc. methods on the event with listeners like keyup, keydown, keypress, etc. But no luck.

I've gone through the answers mentioned on stackoverflow, and other links too. But still no luck.

Is there any workaround for this?

I'm asking about the issue on the Android web browser!

With Key Event Viewer, we can observe that CapsLock can be detected on Web or mobile web browser on iPhone, but not on a web browser on Android devices.

It should work the same way. What browser/version do you use? — Thomas Sablik
– Thomas Sablik, Commented Mar 22, 2021 at 7:37
@ThomasSablik: I've checked on Android Chrome browser v89.0.4389.0. — Aniruddha Shevle
– Aniruddha Shevle, Commented Mar 22, 2021 at 7:39
developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/… says it should work since Chrome 48. — Thomas Sablik
– Thomas Sablik, Commented Mar 22, 2021 at 7:42
@ThomasSablik: Exactly, even I checked on can I use, but still, it's not behaving as expected! — Aniruddha Shevle
– Aniruddha Shevle, Commented Mar 22, 2021 at 7:45
@AniruddhaShevle As I said on the gist you commented on, each software keyboard treats listeners differently. Depending on the software keyboard being used, you may notice that events aren't fired properly. Which soft-keyboard are you using? — Jason N. Gaylord
– Jason N. Gaylord, Commented Mar 22, 2021 at 14:14

Hackinet · Accepted Answer · 2021-04-01 11:06:47Z

0

While this code works on some Android devices, it won't work on all, because the e.ShiftKey turns out to be false in Android. On android, it actually depends on your keyboard.

This is the best, I was able to come up with.

document.addEventListener ('keyup', function (event){ 
        
    let status = checkCapsLock(event);
    
    document.getElementById("status").innerHTML += ('<span class="'+ status +'">Status: ' + status + '</span>');

});  
 

function checkCapsLock(e) {
  e = e ? e : window.event;
  
  if (e.getModifierState('CapsLock'))
    return true;
    
  let isShiftOn = e.shiftKey;
  
  let s = e.key;
  
  if(s.length != 1){
  let keyCode = e.keyCode; //e.KeyCode is always 229 on Android;
      if(keyCode == 229) 
        s = (e.target.value).split('').pop();
  }
     
  if ( (s.length != 0 ) && (s.toUpperCase() === s) && !isShiftOn )
        return true;
  return false;
}

span{
  display: block;
  background: red;
}

span.true{
  background: green;
}

Input: <input id="targetInput">
<p id="status"></p>

answered Apr 1, 2021 at 11:06

Hackinet

3,3481 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aniruddha Shevle Over a year ago

Thanks for your response, but this also triggers green output when we just press Shift + any other char!

Collectives™ on Stack Overflow

How to detect Caps Lock is ON on web browser on Android Devices using JavaScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related