前端記錄用戶(hù)正在按的按鍵的功能

我有這樣一個(gè)需求，需要檢測(cè)用戶(hù)正在按下的按鍵，如果是某一個(gè)組合按鍵（比如command + shift + p），我就執(zhí)行某一個(gè)操作。

但是遇到了問(wèn)題，就是復(fù)合按鍵的keyup事件沒(méi)有觸發(fā)，而僅僅觸發(fā)了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);

單個(gè)按鍵是沒(méi)有問(wèn)題的

可重現(xiàn)的demo地址： https://codepen.io/zhipenglu/...

回答

編輯回答

莫小染

已經(jīng)涼了這個(gè)問(wèn)題？

2018年5月26日 08:08

編輯回答

毀與悔

我打開(kāi)你的可復(fù)現(xiàn)鏈接加了幾行代碼測(cè)試了一下發(fā)現(xiàn)是可以檢測(cè)到復(fù)合按鈕的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);

當(dāng)我三個(gè)手指同時(shí)抬起的時(shí)候，是可以打印出哈哈哈的

2018年7月10日 09:23

編輯回答

悶騷型

由于我這邊是Windows，所以用CTRL的Keycode(17)

沒(méi)看懂題目的意思，復(fù)合按鍵的keyup事件沒(méi)有觸發(fā)
我這里嘗試替換了一下，沒(méi)有這個(gè)問(wèn)題。https://codepen.io/mscststs/p...

Mac獨(dú)占？

2017年12月12日 19:24

編輯回答

小眼睛

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

2017年4月24日 13:48