Mac 中的 Capslock 不会触发 keyDown 事件

Question

CHROME (52):

打开大写锁定时 - 仅触发按下键（keyUp 或 keyPress 中没有事件）

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

火狐 (46):

打开和关闭大写锁定（没有 keyUp 或 keyPress）仅触发 keyDown 事件

我已在此处阅读有关键码和事件的信息 http://www.quirksmode.org/js/keys.html and in MDN here https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode, aaaand here http://unixpapa.com/js/key.html

但是上述链接中的 none 讨论了这种奇怪的行为。这是预期的吗？如果是这样，有更简单的处理方法吗？

Answer 1

是的，这是预期的。

Chrome 将 CAPS ON 视为 keydown 因为它将 on/off 视为按住，就像我们按住 [=34] =]shift 键，打开行为上限并在我们释放它时关闭。这个 Caps Lock 按钮也是。当您打开 Caps Lock 时，chrome 将 'turn on' 作为 keypress 处理，当您 'turn off' 它把它当作 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 的回答为我指明了方向。

在我的例子中，我想警告用户在登录时他们的大写锁定是打开的。最终我选择了以下解决方案。

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 的解释。帮了大忙。

Mac 中的 Capslock 不会触发 keyDown 事件

keyDown event is not fired for Capslock in Mac

javascript

events

keyboard-events

capslock

dom-events