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

Question

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

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

但是它不适用于 Android 设备上的浏览器。我尝试了许多其他解决方案，使用 charCode、keyCode、shiftKey 等方法处理事件，并使用 keyup、keydown、keypress 等监听器。但没有成功。

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

有解决办法吗？

我在询问有关 Android 网络浏览器的问题!

与 Key Event Viewer ，我们可以观察到 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>