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

问题描述

我们可以使用 KeyboardEvent.getModifierState() 和示例代码很好地检测 iPhone 网络浏览器上的 CapsLock 是否打开/未打开

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

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

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

有什么解决方法吗？

PS：这不是一个重复的问题，我是问关于 Android 网络浏览器的问题！

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

解决方法

虽然此代码适用于某些 Android 设备，但不适用于所有设备，因为 e.ShiftKey 在 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>