如何在没有修饰键的情况下合理检测按键？

Question

检测是否在没有任何修饰键（例如Ctrl、Alt、Alt Gr）的情况下按下某个键（例如F）的最明智方法是什么？

您是否必须明确考虑每个修饰键？

KeyboardEvent：ctrlKey 属性、altKey 属性、AltGraph 键值

window.addEventListener("keydown", (event) => {
  if (!event.ctrlKey && !event.altKey && event.key !== "AltGraph" && event.key === "f") {
    doSomething();
  }
});

KeyboardEvent：getModifierState()方法

window.addEventListener("keydown", (event) => {
  if (!event.getModifierState("Control") && !event.getModifierState("Alt") && !event.getModifierState("AltGraph") && event.key === "f") {
    doSomething();
  }
});

Answer 1

getModifierState()

可能就是您所需要的。只需创建一个需要检查的按键列表，以及相应的功能：

function checkModifierKeys(event, key) {
  console.log(event, event.key.toUpperCase(), key.toUpperCase());
  if (event.key.toUpperCase() !== key.toUpperCase()) {
    return false;
  }
  const modifierKeys = [
    'Alt',
    'AltGraph',
    'CapsLock',
    'Control',
    'Fn',
    'FnLock',
    'Hyper',
    'Meta',
    'NumLock',
    'ScrollLock',
    'Shift',
    'Super',
    'Symbol',
    'SymbolLock',
  ];
  let isModifier = false;
  modifierKeys.forEach(modifierKey => {
    if (event.getModifierState(modifierKey)) {
      console.log(modifierKey);
      isModifier = true;
    }
  });
  return isModifier;
}

document.addEventListener('keydown', event => {
  console.log(checkModifierKeys(event, 'f'));
});