在jQuery中检测单个按键事件上的多个键

时间:2012-05-18 15:12:10

标签: javascript jquery keypress jquery-events

是否可以组合使用按键的混合物来发射单个事件?

$(document).keyup(function(e){
    if (e.keyCode == 68 && e.keyCode == 69 && e.keyCode == 86) {
        alert('oh hai');
    }
});

我在Chrome中尝试过,但事件并未触发。

叫我疯了,但是我正在编写一个Chrome扩展程序,并希望将 D + E + V 键一起推送到隐藏的开发者模式。

12 个答案:

答案 0 :(得分:70)

如果你想检测 d e v 键同时全部关闭,你必须要看同时keydownkeyup并保留已关闭的地图。当他们全部失败时,开除你的活动。

例如:Live copy | source

var map = {68: false, 69: false, 86: false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[68] && map[69] && map[86]) {
            // FIRE EVENT
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

我认为你不关心他们被按下的顺序(因为这可能是一种痛苦,可靠的按压),只要他们在某个时刻同时失败。

答案 1 :(得分:17)

与Vega相似......但更简单

var down = {};
$(document).keydown(function(e) {
    down[e.keyCode] = true;
}).keyup(function(e) {
    if (down[68] && down[69] && down[86]) {
        alert('oh hai');
    }
    down[e.keyCode] = false;
});​

答案 2 :(得分:8)

也许更简单的组合键会更容易?

像Shift + Alt + D这样的东西怎么样? (您可能不应该使用Control键,因为大多数浏览器已经以某种方式解释了Ctrl + D)

这个代码就像这样:

if(e.shiftKey && e.altKey && e.keyCode == 68)
{
  alert('l33t!');
}

答案 3 :(得分:3)

我从 T.J回答。对于想要避免Jquery 的人来说,在简单的javascript中使用

//A W S D simultaneously
var map = {65: false, 87: false, 83: false, 68: false};
document.body.addEventListener('keydown', function (e) {
    var e = e || event; //to deal with old IE
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[65] && map[87]) {
            console.log('up left');
        }else if (map[83] && map[68]) {
            console.log('down right');
        }else if (map[87] && map[68]) {
            console.log('up right');
        }else if (map[83] && map[65]) {
            console.log('down left');
        }
    }
});
document.body.addEventListener('keyup', function (e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

答案 4 :(得分:1)

您需要分别捕获三个关键事件,并仅在第三个事件之后触发您的操作。

var keys = {
        d: { code: 100, pressed: false, next: 'e' },
        e: { code: 101, pressed: false, next: 'v' },
        v: { code: 118, pressed: false, next: 'd' }
    },
    nextKey = 'd';

$(document).keypress(function(e) {
    if (e.keyCode === keys[nextKey].code) {
        keys[nextKey].pressed = true;
        nextKey = keys[nextKey].next;
    } else {
        keys.d.pressed = false;
        keys.e.pressed = false;
        keys.v.pressed = false;
        nextKey = 'd';
    }

    if (keys.d.pressed && keys.e.pressed && keys.v.pressed) {
        alert('Entering dev mode...');
    }
});​

当然,有很多方法可以做到这一点。此示例并不要求您同时按住键,只需按顺序键入它们: d e v

如果您使用了此功能,则可能需要对其进行扩充以在一段时间间隔后清除pressed标记。

这里是working example


免责声明:我意识到原来的问题是按键应该按在一起"这只是一个替代方案,因为其他回答者已经为按下的键提供了足够的解决方案。

答案 5 :(得分:1)

我尝试了三个最佳答案(截至本文),但这些答案都不适合我。 他们没有重置密钥

如果需要3个键才能触发脚本,在触发一次后 - 按下3个键中的任何一个键都会再次触发它。

我刚刚写了这个脚本,它运行得很好。它使用Shift + S来触发,但你可以轻松改变它。按下组合后重置。

var saveArray = new Array();
saveArray[0] = false;
saveArray[1] = false;

$(document).ready(function(){

    $(document).keydown(function (f){
        if (f.keyCode == 16) {
            saveArray[0] = true;
        }
    });

    $(document).keyup(function (g){
        if(g.which == 16){
            saveArray[0] = false;
        }
    });

    $(document).keydown(function (h){
        if (h.keyCode == 83) {
            saveArray[1] = true;
            if(saveArray[0] == true && saveArray[1] == true){
                saveArray[0] = false;
                saveArray[1] = false;
                keypressSaveFunction();
            }
        }
    });

    $(document).keyup(function (i){
        if (i.which == 83) {
            saveArray[1] = false;
        }
    });
});

    function keypressSaveFunction(){
        alert("You pressed Shift+S");
    }

小提琴:http://jsfiddle.net/9m8yswwo/13/

答案 6 :(得分:1)

更现代的解决方案,利用arrow functionsrest parameters



const multipleKeypress = (function($document) {
  // Map of keys which are currently down.
  const keymap = {}
  // Update keymap on keydown and keyup events.
  $document.on(
    "keydown keyup"
    // If the key is down, assign true to the corresponding
    // propery of keymap, otherwise assign false.
   ,event => keymap[event.keyCode] = event.type === "keydown"
  )
  // The actual function.
  // Takes listener as the first argument,
  // rest of the arguments are key codes.
  return (listener, ...keys) =>
    $document.keydown(() => {
      // Check if every of the specified keys is down.
      if (keys.every(key => keymap[key]))
        listener(event)
    })
// Pass a jQuery document object to cache it.
}($(document)))

// Example usage:
multipleKeypress(() => console.log("pressed"), 68, 69, 86)

// Automatically focus the snippet result
window.focus()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Try pressing <kbd>d</kbd>, <kbd>e</kbd> and <kbd>v</kbd> at once.</p>
&#13;
&#13;
&#13;

答案 7 :(得分:0)

如果我很清楚:示例小提琴,http://jsfiddle.net/gAtTk/(看看你的js控制台)

此代码将允许您输入单词“dev”(在此示例中,最后删除了事件keyup

(function(seq) {
    var tmp = seq.slice();
    $(document).on("keyup.entersequence", function(e){
        if (!(e.keyCode === tmp.pop())) {
           tmp = seq.slice();
        }
        else {
           console.log(e.keyCode);  
            if (!tmp.length) {
               console.log('end');
               $(document).off("keyup.entersequence");
            }
        }
    });
}([68,69,86].reverse()));

答案 8 :(得分:0)

你应该使用keydown和keyup事件来“同时”处理多个密钥。

input.on("keydown", function (e) {
                        if (e.which == 17) {
                            isCtrl = true; // Ctrl
                            return;
                        }

                        /* Ctrl and "c" */
                        if (isCtrl && e.which == 67) {
                            //some code 
                        }
                    }).keyup(function (e) {
                        if (e.which == 17) {
                            isCtrl = false; // no Ctrl
                        }
                    });

答案 9 :(得分:0)

使用此代码在100毫秒后按下多次按键+超时触发事件以防止输入错误。 在此示例中:如果在100ms的时间段内按下A,Z,E,则将触发事件。

var map = {65:false,90:false,69:false}; //Modify keyCodes here
$(document).keydown(function(e){
    console.log(e.keyCode);
    map[e.keyCode] = e.keyCode in map ? true : map[e.keyCode] || false;
    var result = Object.keys(map).filter(function(key){
        return map[key];
    }).length === Object.keys(map).length ? true : false;
    if(result){
        //Your event here
        Object.keys(map).forEach(function(key){
            map[key] = false;
        });
    }
    setTimeout(function(){
        map[e.keyCode] = false;
    },100);
});

答案 10 :(得分:-1)

如果您关心订单并且还需要按住一个键并点击另一个键(例如:Shift + DEL,DEL,DEL ...),而无需抬起第一个键以使事件再次触发...我修改了@ BlakePlumm的[小提琴]评论,延长了@ lu1s对@ ParthThakkar答案的评论。

此外,使用jQuery的.on()允许您仅在某些元素上侦听键序列。将'body'更改为'input.selector'或其他任何内容。

var map = [];
var down = [];
$(document).on('keydown','body', function(e) {
    if(!map[e.which]){
        down.push(e.which);
        if(down[0] === 68 && down[1] === 69 && down[2] === 86) {
            console.log('D + E + V');
        } else if(down[0] === 16 && down[1] === 46) {
            console.log('SHIFT + DEL');
        }
        /* more conditions here */
    }
    map[e.which] = true;
}).keyup(function(e) {
    map[e.which] = false;

    /* important for detecting repeat presses of
       last key while holding first key(s)
       (can be shortened. see fiddle) */
    var len = down.length;
    while (len--) {
        if(down[len] === e.which) down.splice(len,1); //removes only the keyup'd key
    }        
    $('.alert').html('');
});

其他想法: 如果您只关心订单 - 也就是说,只需要关闭第一个键,只要最后按下主事件触发键(如CTRL + SHIFT + TAB,TAB,TAB等),添加此条件:

else if(down.length>2) {
    if($.inArray(68,down)!=-1 && $.inArray(69,down)!=-1 && down[2] === 86) {
        $('.alert').html('A hacky D+E+V was pressed');
    }
}

提供更多光荣的选项和现场演示: - http://jsfiddle.net/kstarr/4ftL1p3k/

答案 11 :(得分:-1)

https://github.com/JesseBuesking/jquery.hotkeys.extended

检查一下。你可能正在寻找这个。

我们可以在多次按键时触发功能。 例如:p + t + k

 $(document).hotkeys('p', 't', 'k', function (){
        //show blurbox
        $('#popup').blurbox({
            blur: 10, animateBlur: true, bgColor: 'rgba(255,255,0,0.2)'
        })bb.show();
    });

也许你正在寻找这个。