你如何判断大写锁定是否使用 JavaScript？

Question

你如何判断大写锁定是否使用 JavaScript？

不过有一个警告：我用谷歌搜索了一下，我能找到的最佳解决方案是为每个输入附加一个 onkeypress 事件，然后每次检查按下的字母是否为大写，如果是，则检查是否shift 也被按住了。如果不是，则必须打开大写锁定。这感觉真的很脏而且只是…… 浪费- 当然有比这更好的方法吗？

原文由 nickf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试一下。添加了一个工作示例。当焦点在输入上时，打开大写锁定会使 LED 变为红色，否则变为绿色。 （没有在 mac/linux 上测试过）

注意：两个版本都适用于我。感谢评论中的建设性意见。

旧版本： https ://jsbin.com/mahenes/edit?js,output

另外，这是一个修改版本（有人可以在 mac 上测试并确认）

新版本： https ://jsbin.com/xiconuv/edit?js,output

新版本：

 function isCapslock(e) {
  const IS_MAC = /Mac/.test(navigator.platform);

  const charCode = e.charCode;
  const shiftKey = e.shiftKey;

  if (charCode >= 97 && charCode <= 122) {
    capsLock = shiftKey;
  } else if (charCode >= 65 && charCode <= 90
    && !(shiftKey && IS_MAC)) {
    capsLock = !shiftKey;
  }

  return capsLock;
}

旧版：

 function isCapslock(e) {
  e = (e) ? e : window.event;

  var charCode = false;
  if (e.which) {
    charCode = e.which;
  } else if (e.keyCode) {
    charCode = e.keyCode;
  }

  var shifton = false;
  if (e.shiftKey) {
    shifton = e.shiftKey;
  } else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
  }

  if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
  }

  if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
  }

  return false;
}

对于国际字符，可以根据需要为以下键添加额外的检查。您必须获得您感兴趣的字符的键码范围，可能是通过使用键映射数组来保存您正在寻址的所有有效用例键…

大写 AZ 或 ‘Ä’、’Ö’、’Ü’，小写 aZ 或 0-9 或 ‘ä’、’ö’、’ü’

上面的键只是示例表示。

原文由 rajesh pillai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 KeyboardEvent 来检测许多键，包括最新浏览器上的大写锁定。

getModifierState 函数 将为以下各项提供状态：

• Alt
• 替代图
• 大写锁定
• 控制
• Fn（安卓）
• 元
• 数字键盘（的第一个键
• 操作系统（Windows 和 Linux）
• 滚动锁定
• 转移

该演示 适用于所有主流浏览器，包括移动设备 ( caniuse )。

 passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

原文由 Mottie 发布，翻译遵循 CC BY-SA 4.0 许可协议