使用jQuery/JavaScript进行关键组合

Question

我很好奇我是如何使用以下jQuery插件代码在这个问题的底部写的,可以实现关键的组合.到目前为止它是如何工作的,它允许用户只需通过正常的jQuery语法创建键命令,并为键命令提供事件,如下所示:

$(window).jkey('a',function(){
   alert('you pressed the a key!');
});

要么

$(window).jkey('b c d',function(){
   alert('you pressed either the b, c, or d key!');
});

最后我想要的是能力,但无法弄清楚:

$(window).jkey('alt+n',function(){
   alert('you pressed alt+n!');
});

我知道如何在插件外部执行此操作(在keyup上设置var false并在keydown上设置var true并检查当你按另一个键时var是否为真),但我不知道如何执行此操作你不知道将要按什么键和多少键.如何添加此支持？我希望能够让他们做这样的事情alt+shift+a或者a+s+d+f,如果他们想要的.我无法理解如何实现这一点.有任何想法吗？

我将把它作为一个开源插件发布,我很乐意给予任何给予我权利,工作的人,在博客文章和代码中回答一些信用.提前致谢!

(function($) {
  $.fn.jkey = function(keyCombo,callback) {
    if(keyCombo.indexOf(' ') > -1){ //If multiple keys are selected
        var keySplit = keyCombo.split(' ');
    }
    else{ //Else just store this single key
        var keySplit = [keyCombo];
    }
    for(x in keySplit){ //For each key in the array...

        if(keySplit[x].indexOf('+') > -1){
            //Key selection by user is a key combo... what now?
        }
        else{
            //Otherwise, it's just a normal, single key command
        }

        switch(keySplit[x]){
            case 'a':
                keySplit[x] = 65;
                break;
            case 'b':
                keySplit[x] = 66;
                break;
            case 'c':
                keySplit[x] = 67;
                break;
            //And so on for all the rest of the keys
        }
    }
    return this.each(function() {
        $this = $(this);
        $this.keydown(function(e){
            if($.inArray(e.keyCode, keySplit) > -1){ //If the key the user pressed is matched with any key the developer set a key code with...
                if(typeof callback == 'function'){ //and they provided a callback function
                    callback(); //trigger call back and...
                    e.preventDefault(); //cancel the normal
                }
            }
        });
    });
  }
})(jQuery);

Answer 1

使用keypress而不是keyup/keydown,因为后两者不能准确地生成密钥代码(参考,见最后一段).您可以参考altKey ctrlKey和shiftKey事件对象的布尔属性在这种情况下...

$(document).keypress(function(e) {
  var key = String.fromCharCode(e.which);
  var alt = e.altKey;
  var ctrl = e.ctrlKey
  var shift = e.shiftKey;
  alert("Key:" + key + "\nAlt:" + alt + "\nCtrl:" + ctrl + "\nShift:" + shift);
});

此外,您可以使用String.fromCharCode将密钥代码转换为实际的字母.

除了使用Ctrl,Alt和Shift组合之外,您不能捕获多个键.你根本无法在一个事件中做到这一点.所以把a+s+d+f想法扔出窗外.

注意:显然,浏览器使用某些键组合.例如,Alt + F通常会在Windows中显示"文件"菜单.Ctrl + N通常会启动一个新窗口/选项卡.不要不试图覆盖所有这些组合.

这是一个现场演示,为您的测试乐趣.

Answer 2

这就是我的想法。本质上，我所做的是创建一个存储所有关键代码的 JSON 对象。然后我用代码替换所有提供的密钥。如果这些键使用“+”来构成组合键，那么我会从中创建一个代码数组。

然后我们创建另一个数组来存储所有被按下的键（keyDown 添加该项目，keyUp 删除它）。在 keyDown 上，我们检查它是单个键盘命令还是组合命令。如果它是组合，我们会根据所有当前活动的按键进行检查。如果它们全部匹配，我们执行回调。

这适用于任意数量的组合键。我唯一一次看到它不起作用是当您使用“alert()”在组合键上显示消息时，因为它将不再从活动按键数组中删除项目。

(function($) { 
  $.fn.jkey = function(keyCombo,callback) {

    // Save the key codes to JSON object
    var keyCodes = { 
      'a'   : 65,
      'b'   : 66,
      'c'   : 67,
      'alt' : 18
    };

    var x = '';
    var y = '';

    if(keyCombo.indexOf(' ') > -1){ //If multiple keys are selected
        var keySplit = keyCombo.split(' ');
    }
    else{ //Else just store this single key
        var keySplit = [keyCombo];
    }

    for(x in keySplit){ //For each key in the array...

      if(keySplit[x].indexOf('+') > -1){
        //Key selection by user is a key combo
        // Create a combo array and split the key combo
        var combo = Array();
        var comboSplit = keySplit[x].split('+');

        // Save the key codes for each element in the key combo
        for(y in comboSplit){
          combo[y] = keyCodes[ comboSplit[y] ];
        }

        keySplit[x] = combo;

      } else {
        //Otherwise, it's just a normal, single key command
        keySplit[x] = keyCodes[ keySplit[x] ];
      }

    }

    return this.each(function() {
        $this = $(this);

        // Create active keys array
        // This array will store all the keys that are currently being pressed
        var activeKeys = Array();

        $this.keydown(function(e){

          // Save the current key press
          activeKeys[ e.keyCode ] = e.keyCode;

          if($.inArray(e.keyCode, keySplit) > -1){ // If the key the user pressed is matched with any key the developer set a key code with...

            if(typeof callback == 'function'){ //and they provided a callback function
              callback(); //trigger call back and...
              e.preventDefault(); //cancel the normal
            }

          } else { // Else, the key did  not match which means it's either a key combo or just dosn't exist

            // Check if the individual items in the key combo match what was pressed
            for(x in keySplit){
              if($.inArray(e.keyCode, keySplit[x]) > -1){

                // Initiate the active variable
                var active = 'unchecked';

                // All the individual keys in the combo with the keys that are currently being pressed
                for(y in keySplit[x]) {
                  if(active != false) {
                    if($.inArray(keySplit[x][y], activeKeys) > -1){
                      active = true;
                    } else {
                      active = false;
                    }
                  }
                }

                // If all the keys in the combo are being pressed, active will equal true
                if(active === true){
                  if(typeof callback == 'function'){ //and they provided a callback function
                    callback(); //trigger call back and...
                    e.preventDefault(); //cancel the normal
                  }
                }
              }
            }

          } // end of if in array

        }).keyup(function(e) {
          // Remove the current key press
          activeKeys[ e.keyCode ] = '';
        });

    });

  }
})(jQuery);