如何使用 JavaScript 在 Android 设备上的网络浏览器上检测 Caps Lock 是否打开？

Question

我们可以使用KeyboardEvent.getModifierState()很好地检测CapsLock是否在iPhone网络浏览器上打开/关闭，并带有示例代码，

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

但它不适用于 Android 设备上的浏览器。我已经尝试了许多其他解决方案，在事件上使用 charCode、keyCode、shiftKey、which 等方法，监听器如 keyup、keydown、keypress 等。但没有运气。

我已经浏览了stackoverflow 中提到的答案以及其他链接。但还是没有运气。

有什么解决方法吗？

PS：这不是重复的问题，我是在问安卓网络浏览器的问题！

编辑：在W3C，我们可以观察到 CapsLock 可以在 iPhone 上的 Web 或移动网络浏览器上检测到，但在 Android 设备上的网络浏览器上却检测不到。

Answer 1

虽然此代码适用于某些 Android 设备，但它并非适用于所有设备，因为 e.ShiftKey 在 Android 中被证明是错误的。在 android 上，它实际上取决于您的键盘。

这是最好的，我能想到的。

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>