Mac 中的 Capslock 不会触发 keyDown 事件

big*_*ega 4 javascript events keyboard-events capslock dom-events

铬 (52):

当打开大写锁定时 - 仅触发 keydown(keyUp 或 keyPress 中没有事件)

当关闭大写锁定时 - 仅触发 keyup(keyDown 或 keyPress 中没有事件)

火狐 (46):

对于大写锁定打开和关闭,仅触发 keyDown 事件(无 keyUp 或 keyPress)

我在这里阅读了有关 keyCodes 和事件的信息http://www.quirksmode.org/js/keys.html以及 MDN 中的内容https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent /keyCode, aaa 和这里http://unixpapa.com/js/key.html

但以上链接都没有讨论这种奇怪的行为。这是预期的吗?如果是这样,有什么更简单的方法可以处理吗?

Pra*_*avi 5

是的,这是预期的。

Chrome 将大写字母视为打开,因为keydown它将开/关视为按住,就像我们按住Shift键一样,这会打开大写字母的行为,并在我们释放它时关闭。还有这个大写锁定按钮。当您打开Caps Lock时,chrome 将“打开”处理为 a keypress,当您“关闭”时,它会将其处理为 a keyup。但是,keydown与 Chrome 的处理方式相比,Firefox 处理的所有事情对我来说没有意义。

解决方案

您应该使用getModifierState()来获取Caps Lock. Chrome 和 Firefox 均支持此功能。

希望能帮助到你!

$(function() {
  $(window).on("keydown", function(e){
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
  $(window).on("keyup", function(e) {
    if (e.which === 20)
      console.log(e.originalEvent.getModifierState('CapsLock'))
  });
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Focus here and press 'Caps Lock'
Run Code Online (Sandbox Code Playgroud)