Question

CHROME（52）：

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

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

FIREFOX（46）：

只有两个大写锁定ON＆amp; OFF（无keyUp或keyPress）

我已在此处http://www.quirksmode.org/js/keys.html及MDN（{3}}，aaa和此处https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

了解了关键代码和事件

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

Answer 1

是的，这是预期的。

Chrome会将 CAPS ON 视为keydown，因为它会将开启/关闭视为按住，就像我们按住 shift 键一样，这会打开上限关于行为并在我们发布它时关闭。此大写锁定按钮也是。当您启用大写锁定时，Chrome会将'打开'作为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，并且我可以* ng如果显示的是图标或消息，或者同时显示这两者。

感谢Pranesh的解释。它起到了很大作用。

Mac中的Capslock不会触发keyDown事件

2 个答案: