3

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36
  • It should work the same way. What browser/version do you use? – Thomas Sablik Mar 22 '21 at 07:37
  • @ThomasSablik: I've checked on Android Chrome browser v89.0.4389.0. – Aniruddha Shevle Mar 22 '21 at 07:39
  • https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState says it should work since Chrome 48. – Thomas Sablik Mar 22 '21 at 07:42
  • @ThomasSablik: Exactly, even I checked on [can I use](https://caniuse.com/keyboardevent-getmodifierstate), but still, it's not behaving as expected! – Aniruddha Shevle Mar 22 '21 at 07:45
  • I checked it on https://w3c.github.io/uievents/tools/key-event-viewer.html It looks like JavaScript can't distinguish c, Shift-c, and Caps-Lock-c. It registered 3 equal events for me. – Thomas Sablik Mar 22 '21 at 07:50
  • @ThomasSablik: On the link, if you check on the Android browser, if we press Shift, it doesn't show anything! As we'll be using Shift to make CapsLock ON. However, the same thing if we do on iPhone, works very well! – Aniruddha Shevle Mar 22 '21 at 08:02
  • 1
    @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 Mar 22 '21 at 14:14
  • @JasonN.Gaylord: This issue is there on Android devices, Remi Note (7,8), Google Pixel, OnePlus, etc! – Aniruddha Shevle Mar 23 '21 at 06:31
  • Our experience is frustratingly the same with Android phones as per @JasonN.Gaylord comment due to the software keyboard being used, not the browser or the Android OS. Hence, you will find industry wide that password fields contain a 'SHOW' button to ensure your password is not all CAPS, as the webform cannot detect 'CAPS LOCK ON' from the software keyboard. The android OS and web browsers are fine. You can verify this by connecting a physical keyboard to your android device, use it with an android browser and 'CAPS LOCK ON' will be detected. We tested a Bluetooth and a USB (via OTG) keyboard. – djmonki Mar 31 '21 at 21:50

1 Answers1

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>
Hackinet
  • 3,252
  • 1
  • 10
  • 22