OS X 上的 JS 键码：当“空格”+另一个键已被按下时，“Digit6”不会被触发

Question

“Digit6”在“Space”（或“Slash”、“KeyH”时不触发可能还有其他人）+ 另一个随机键（比如“Digit5”）已经被按下。

以https://keycode.info 为例：

1. 维护 (SpaceBar + key 5) 并按 key 4 返回 event.code "Digit4"
2. 维护 (SpaceBar + key 5) 并按 key 6 仍会返回 event.code "Digit5" （所以什么都没有发生）。

我在 Chrome、Safari、Firefox 中尝试过这个测试，结果是一样的。我也在 Windows 10 上尝试过它，它按预期工作，所以我猜它可能是 OS X 的东西。

Answer 1

在此处添加完整答案以防万一其他人遇到此问题，但对于您的具体问题，请查看最后。

KeyboardEvent 有几个不同的属性可以帮助您找出按下了哪些键：

• ✏️ e.key 和 e.code 是引用刚刚按下/释放的键的新属性。

• ? e.which、e.keyCode 和 e.charCode 是旧的不推荐使用的属性，它们用于同一事物，但不应再使用（除非您出于某种原因需要 support really old browsers）。

• ?️ altKey、ctrlKey、metaKey、shiftKey 表示 ⌥、⌃、⌘ 或⇧ 键分别与主键 (e.key / e.code) 一起按下，假设此键在之前被按下。

  这意味着如果您按 ⇧ + J（按此顺序），那么您将在第二个事件中获得{ e.key: "J", e.shiftKey: true }（每个键获得一个) 但是如果你按 J + ⇧ （按这个顺序），那么你会得到{ e.key: "J", e.shiftKey: false }，然后是{ e.key: "Shift", e.shiftKey: true }。

这些是按下 ⇧ + J 时它包含的所有属性：

{
    altKey: false, ?️
    bubbles: true,
    cancelBubble: false,
    cancelable: true,
    charCode: 0, ?
    code: "KeyJ", ✏️
    composed: true,
    ctrlKey: false, ?️
    currentTarget: null,
    defaultPrevented: false,
    detail: 0,
    eventPhase: 0,
    isComposing: false,
    isTrusted: true,
    key: "J", ✏️
    keyCode: 74, ?
    location: 0,
    metaKey: false, ?️
    path: (5) [input#input, body, html, document, Window],
    repeat: false,
    returnValue: true,
    shiftKey: true, ?️
    sourceCapabilities: InputDeviceCapabilities { firesTouchEvents: false },
    srcElement: input#input,
    target: input#input,
    timeStamp: 10280.554999997548,
    type: "keydown",
    view: Window { … },
    which: 74, ?
}

如果你去https://keyjs.dev（免责声明：我是作者。）你会看到它实际上检测到任何键以及同时按下的 4 个修改键，你可以见下文：

如果您打开控制台，您可以看到正在登录的个人 KeyboardEvents。

问题在于KeyboardEvent 仅包含有关已按下或释放的最后一个键的信息（4 个修改键除外），https://keyjs.dev 和 https://keycode.info 一次记录一个事件，因此您需要使用keydown 和keyup 事件跟踪自己按下/释放的内容：

const pressedKeys = {};

function logPressedKeys() {
  console.log(Object.keys(pressedKeys).join(' + '));
}

document.addEventListener('keydown', ({ key, altKey, ctrlKey, metaKey, shiftKey }) => {
  pressedKeys[key] = true;
  
  if (altKey) pressedKeys.Alt = true;
  if (ctrlKey) pressedKeys.Control = true;
  if (metaKey) pressedKeys.Meta = true;
  if (shiftKey) pressedKeys.Shift = true;
  
  logPressedKeys();
});

document.addEventListener('keyup', ({ key, altKey, ctrlKey, metaKey, shiftKey }) => {
  delete pressedKeys[key];
  
  if (!altKey) delete pressedKeys.Alt;
  if (!ctrlKey) delete pressedKeys.Control;
  if (!metaKey) delete pressedKeys.Meta;
  if (!shiftKey) delete pressedKeys.Shift;
  
  logPressedKeys();
});

请注意，您的键盘在同时按下时可以检测到多少个键也存在硬件限制。在我的情况下，是 6。但是，某些键盘可能具有下限或对键进行不同编码，根据特定的键组合具有下限或上限，因此您可能会在其中一种情况下运行。