Mac中的Capslock不会触发keyDown事件

Question

CHROME（52）：

当大写锁定ON时 - 仅触发keydown（keyUp或keyPress中没有事件）

当大写锁定关闭时 - 仅触发键盘（在keyDown或keyPress中没有事件）

FIREFOX（46）：

两个大写锁定ON和OFF都没有触发keyDown事件（没有keyUp或keyPress）

我已经在这里阅读了关于密钥编码和事件http://www.quirksmode.org/js/keys.html和MDN这里https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode，aaaand这里http://unixpapa.com/js/key.html

但上述链接都没有谈到这种奇怪的行为。这是预期的吗？如果是这样，任何更简单的方法来处理它？

Answer 1

是的，这是预料之中的。

Chrome将CAPS ON视为keydown，因为它将开/关视为按住，就像我们按住shift键一样，它会打开行为上限并在我们释放它时关闭。这个Caps Lock按钮也是。当你打开Caps Lock时，chrome将'turn on'作为keypress处理，当你'关闭'时，它将它作为keyup处理。但是，firefox处理的所有内容都是keydown，与Chrome处理相同的内容相比，这对我来说没有意义。

解

你应该使用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'))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Focus here and press 'Caps Lock'

Answer 2

我一直在寻找一个非常类似问题的答案。 Pranesh的回答指出了我的方向。

在我的情况下，我想警告用户他们登录时他们的大写锁定已打开。最终我决定使用以下解决方案。

角度成分：

export class AuthenticateComponent {
  public capslockOn: boolean;

  constructor() {
    this.capslockOn = false;
  }

  public keyup(event: KeyboardEvent): void {
    if (event.key === 'CapsLock') {
      // Checks / sets when the Caps Lock key is specifically pressed.
      this.capslockOn = (!this.capslockOn && event.getModifierState('CapsLock'));
    } else {
      // Checks all other conditions like the Caps Lock was on before the user
      // loaded the form and began typing in it.
      this.capslockOn = event.getModifierState('CapsLock');
    }
  }
}

然后我只是从我的表单中调用keyup函数：

<form ... (keyup)="keyup($event)">

表单中的任何按键 - 用户名或密码 - 将检查/设置布尔值capslockOn，我可以* ngIf显示图标或消息或两者。

感谢Pranesh的解释。它帮助了很多。