如果快速完成，热键组合不起作用答案

【问题标题】：Hotkey combinations don't work if done fast如果快速完成，热键组合不起作用
【发布时间】：2017-12-10 21:37:09
【问题描述】：

我正在尝试为 Web 应用程序创建一个热键，例如 Ctrl + z 执行撤消功能。

似乎当我快速按键时（因为我习惯于经常使用桌面应用程序），它没有注册。单次按键注册，但由于某种原因它错过了组合。

据我了解，您必须通过按键事件跟踪哪些按钮被按下，这就是我在下面所做的。

试试下面的代码。点击 Z 输出Z。点击 CTRL 然后 Z 缓慢输出CTRL + Z。点击 CTRL 然后 Z 快速输出Z。当我在 Windows 记事本中以相同的速度执行操作时，几乎每次都能完美运行。

https://codepen.io/samkeddy/pen/YQjgdZ?editors=1010#0

var ctrlPressed=false, altPressed=false;

window.addEventListener("keydown", function (e) {

    hotkey = e;
    if (e.keyCode == 17) ctrlPressed = true;
    if (e.keyCode == 18) altPressed = true;
    e.preventDefault();
});

window.addEventListener("keyup", function (e) {
    hotkey = window.event;

    if (e.keyCode == 17) ctrlPressed = false;
    if (e.keyCode == 18) altPressed = false;

        if (e.keyCode == 90){
          if (altPressed && ctrlPressed && e.keyCode == 90) 
            addText('ALT + CTRL + Z');
          else if (ctrlPressed && e.keyCode == 90) 
            addText('CTRL + Z');
            else 
              addText('Z');
    }
});

//meaningless, just adds text to doc so you can see it
function addText(text) {
  var theDiv = document.getElementById("output");
  theDiv.appendChild(document.createElement("br"));
  var content = document.createTextNode(text);
  theDiv.appendChild(content);
}

【问题讨论】：

标签： javascript events input keyboard hotkeys

【解决方案1】：

使用 e.ctrlKey 来检查 ctrl 是否按下而不是变量，并且只检查 keydown 上的热键组合，不要在 key up 上做任何事情。

https://codepen.io/samkeddy/pen/gRdBpq

function KeyPress(e) {
      var evtobj = window.event? event : e
      if (evtobj.keyCode == 90 && evtobj.ctrlKey) addText("CTRL + Z");
  else if (evtobj.keyCode == 90) addText("Z");
}

document.onkeydown = KeyPress;

【讨论】：