在Mac上，按下Capslock键时无法触发keyDown事件。

Question

CHROME (52):

在打开大小写锁定时，仅触发按键按下事件（没有键释放或按键事件）

在关闭大小写锁定时，仅触发键释放事件（没有键按下或按键事件）

FIREFOX (46):

在打开和关闭大小写锁定时仅触发按键按下事件（没有键释放或按键事件）

我已经阅读了这里http://www.quirksmode.org/js/keys.html和MDN的键代码和事件介绍https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode，以及这里 http://unixpapa.com/js/key.html

但以上链接都没有提到这种奇怪的行为。这是预期的吗？如果是，有没有更容易处理它的方法？

- bigOmega ツ

---

出于好奇，你是用大写锁定键做什么的？作为用户，我几乎认为大写锁定键不是一个“键”，并且稍微有些惊讶它会触发任何事件！ - aaaidan

哈哈，我正在设计一个受dota启发的小型快速手游。基于舒适性考虑，人们通常将大写锁定键作为按键，因为它非常靠近W-A-S-D。 - bigOmega ツ

啊，我想知道它是否是一个游戏。干杯。祝你好运！ - aaaidan

@BharathRaja 我的回答可能会对你有所帮助 :P ! - Pranesh Ravi

Answer 1

是的，这是正常的。

Chrome将大写锁定键视为keydown，因为它将开/关视为按下并保持状态，就像我们按住Shift键一样，它打开了大写锁定功能，在释放时关闭。这个大写锁定键也是如此。当您打开大写锁定时，chrome将keypress作为'turn on'处理，当您“关闭”时，它会将其处理为keyup。但是，火狐浏览器处理所有操作都作为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'

- Pranesh Ravi

---

是的，这似乎是我们能得到的最接近的解决方案。但对于一个带有计时器的快捷键游戏，处理 keyup 事件而不是 keydown 事件会产生很大的差异 :( - bigOmega ツ

Answer 2

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

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

Angular组件：

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的解释。它帮了我很多。

- Mark Litchfield