如何实现用户可自定义的键盘快捷键（在 javascript/网络上）答案

【问题标题】：How to implement user-customizable keyboard shortcuts (in javascript/on the web)如何实现用户可自定义的键盘快捷键（在 javascript/网络上）
【发布时间】：2015-12-02 09:26:32
【问题描述】：

标题说明了大部分内容。我想要一个关于如何制作持久的、用户可配置的键盘快捷键监听器的 javascript/html 解决方案（加上任何关于如何实际持久化偏好的好想法，如果你有他们的话）。

这看起来既简单又有点棘手:)

谢谢！

【问题讨论】：

我会查看keypress 事件（可能在document，用于监听整个页面上的键盘事件），以及存储您可以使用 localStorage 的首选项（不用于敏感数据，但适合键盘配置）或简单的 cookie（如果设置不太复杂）。

标签： javascript keyboard-shortcuts

【解决方案1】：

如果您想让用户获得“Control”+(...) 之类的快捷方式，您只需捕获按下的键，因此请检查是否在按下这些键的同时按下“Control”以执行操作。

这是一个简单而糟糕的例子：

var Pressed={
   CTRL:false,
   Spacebar:false
},Keyboard={ // an object containing Keyboard keys code
   CTRL:17,
   Spacebar:32
};
window.onkeydown=function(e){ // user started pressing an key (event)
   var Key=(e.keyCode||e.which||e.key); // capture key pressed from event
   if(Key==Keyboard.CTRL){ // CTRL is pressed
      Pressed.CTRL=true
      Pressed.Spacebar=false // CTRL has to be pressed before than Spacebar
   }else if(Key==Keyboard.Spacebar){ // Spacebar is pressed
      Pressed.Spacebar=true
   }
   if(Pressed.CTRL&&Pressed.Spacebar){ // Case CTRL+Spacebar are pressed
      e.preventDefault(); // prevent Opera from quitting from the page
      console.log("CTRL+Spacebar were pressed.")
   }
},
window.onkeyup=function(e){ // event when an key is released
   var Key=(e.keyCode||e.which||e.key); // capture key released from event
   if(Key==Keyboard.CTRL){ // CTRL is released
      Pressed.CTRL=false
   }else if(Key==Keyboard.Spacebar){ // Spacebar is released
      Pressed.Spacebar=false
   }
};

要更新...

【讨论】：

【解决方案2】：

你可以试试这样的：

出于演示目的，我刚刚记录了 Alt、Ctrl 或 Shift + 'Key' 并且如果在快捷方式中定义了 key，则打印 Special action else 'Normal action'。我还禁用了输入的关键事件的传播，但如果不需要，可以删除此部分。

JSFiddle

代码

(function keyLogger() {
  var isCtrlPressed = false;
  var isAltPressed = false;
  var isShiftPressed = false;
  
  var shortcutKeys = [
    13, // Enter
    32, // Space
    37, // Left Arrow
    38, // Up Arrow
    39, // Right Arrow
    40, // Down Arrow
    90, // z
  ]

  function registerEvents() {
    document.onkeydown = function(event) {
      var keyCode = event.keyCode ? event.keyCode : event.which;
      if (keyCode >= 16 && keyCode <= 18) {
        updateKeyFlags(keyCode, true);
      }

      if (isCtrlPressed || isAltPressed || isShiftPressed) {
        if (shortcutKeys.indexOf(keyCode) >= 0) {
          console.log("Special action");
        } else {
          console.log("Normal action");
        }
      }
    }

    document.onkeyup = function(event) {
      var keyCode = event.keyCode ? event.keyCode : event.which;
      if (keyCode >= 16 && keyCode <= 18) {
        updateKeyFlags(keyCode, false);
      }
    }

    // To prevent logging from Inputs.
    // Can be removed if this action is required.
    var inputs = document.getElementsByTagName("input");
    for (var i in inputs) {
      inputs[i].onkeyup = function(event) {
        event.stopPropagation();
      }
      inputs[i].onkeydown = function(event) {
        event.stopPropagation();
      }
    }
  }

  function updateKeyFlags(keyCode, flag) {
    switch (keyCode) {
      case 16:
        isShiftPressed = flag;
        break;
      case 17:
        isCtrlPressed = flag;
        break;
      case 18:
        isAltPressed = flag;
        break;
    }
  }

  registerEvents();
})();

<div>
  <input type="text">
  <input type="text">
</div>

【讨论】：