前端记录用户正在按的按键的功能

Question

我有这样一个需求， 需要检测用户正在按下的按键，如果是某一个组合按键（比如command + shift + p）， 我就执行某一个操作。

但是遇到了问题， 就是复合按键的keyup事件没有触发，而仅仅触发了keydown。

代码：

const pressingKeyCode = {};

const COMMAND = 91;

const SHIFT = 16;

const P = 80;

window.addEventListener('keydown', e => {
  console.log('keydown', e.keyCode);
  pressingKeyCode[e.keyCode] = true;
  if (
    pressingKeyCode[COMMAND] &&
    pressingKeyCode[SHIFT] &&
    pressingKeyCode[P]
  ) {
    console.log('呵呵');
  }
});

function handleKeyUp(e) {
  console.log('keyup', e.keyCode);
  pressingKeyCode[e.keyCode] = false;
}

window.addEventListener('keyup', handleKeyUp);

单个按键是没有问题的

可重现的demo地址： https://codepen.io/zhipenglu/...

Answer 1

由于我这边是Windows，所以用CTRL的Keycode(17)

没看懂题目的意思，复合按键的keyup事件没有触发
我这里尝试替换了一下，没有这个问题。https://codepen.io/mscststs/p...

Mac独占？

Answer 2

window.addEventListener('keydown',e => {
    const keyCode_S = 83;
    console.log('keydown', e.keyCode);
    if(e.ctrlKey && e.keyCode == keyCode_S){
        e.preventDefault();
        alert('确定保存？');
    }
});

Answer 3

已经凉了这个问题？

Answer 4

我打开你的可复现链接 加了几行代码 测试了一下 发现是可以检测到复合按钮的keyup的。

const pressingKeyCode = {};

const COMMAND = 91;

const SHIFT = 16;

const P = 80;

window.addEventListener('keydown', e => {
  console.log('keydown', e.keyCode);
  pressingKeyCode[e.keyCode] = true;
  if (
    pressingKeyCode[COMMAND] &&
    pressingKeyCode[SHIFT] &&
    pressingKeyCode[P]
  ) {
    console.log('呵呵');
  }
});

function handleKeyUp(e) {
  console.log('keyup', e.keyCode);
  pressingKeyCode[e.keyCode] = false;
  if (
    !pressingKeyCode[COMMAND] &&
    !pressingKeyCode[SHIFT] &&
    !pressingKeyCode[P]
  ) {
    console.log('哈哈哈');
  }
}

window.addEventListener('keyup', handleKeyUp);

当我三个手指同时抬起的时候，是可以打印出 哈哈哈 的