jQuery .keypress() 可以同时检测多个键吗?

IT技术 javascript jquery
2021-01-16 06:06:49

jQuery 有没有办法检测到同时按下了多个键?

是否有任何替代方法可以检测到同时按下两个键?

6个回答

为了检测被按住的多个键,请使用keydownkeyup事件。

var keys = {};

$(document).keydown(function (e) {
    keys[e.which] = true;
});

$(document).keyup(function (e) {
    delete keys[e.which];
});

我在这里整理了一个演示:http : //jsfiddle.net/gFcuU/这很有趣,但我注意到我的键盘最多只能检测 6 个键。

请参阅:jsfiddle.net/gFcuU/524 - 尝试 CTRL + C 一些文本。之后,“按下键”将保持为 1,直到您分别按下/松开 CTRL 和 C。我们怎样才能避免这种情况?
2021-03-19 06:06:49
@ajax333221 这通常是硬件问题-由于键盘的接线方式。不同的键盘会有不同的表现。
2021-03-24 06:06:49
不错的脚本,当它们的字符代码相距很远(2 个或更多差异)时,我最多只能同时获得 6 个键。附:为什么删除密钥而不是将其设置为 false?
2021-03-26 06:06:49
@jerone 我想我不希望对象被所有键的历史记录弄得一团糟,它会在printKeys循环中保存一些迭代但在实践中,你是对的,这是一个很小的差异。
2021-04-02 06:06:49
我也可以做大约 7 个键,但是对于我想要的(箭头键),有一些组合允许 3 或 2,但绝不允许 4...有趣
2021-04-02 06:06:49

这取决于。对于“正常”键,这意味着非ShiftCtrlALT,( CMD),答案是否定的,该事件处理程序将赶上/火在队列中,一个接一个。

对于我上面提到的修饰键,事件对象上有一个属性。

例子:

$(document).bind('keypress', function(event) {
    if( event.which === 65 && event.shiftKey ) {
        alert('you pressed SHIFT+A');
    }
});

Jsfiddle 演示

其他属性是:

  • event.ctrlKey
  • event.altKey
  • event.metaKey
@Box9:在 FF 3.6.x 上测试。metaKey对于ctrl是真的cmd
2021-03-14 06:06:49
出于实际原因,它是 windows/command 键(但是.. en.wikipedia.org/wiki/Meta_key
2021-03-18 06:06:49
@Box9:不,在我的 Mac 上,metaKeyalt、shift、ctrl 和 cmd 设置为 true。值得注意的是,它keypress不会为CMD. 但是对于keydown例如
2021-03-22 06:06:49
@Jacob,我猜是 windows/mac 键?来自 w3:“在某些平台上,此键可能映射到备用键名称。”
2021-03-27 06:06:49
实际上这很奇怪,metaKey 仅适用于 Chrome 中 Mac 上的 Cmd。
2021-03-31 06:06:49

如果您只想在连续按下多个键时触发处理程序,请尝试以下操作:

jQuery.multipress = function (keys, handler) {
    'use strict';

    if (keys.length === 0) {
        return;
    }

    var down = {};
    jQuery(document).keydown(function (event) {
        down[event.keyCode] = true;
    }).keyup(function (event) {
        // Copy keys array, build array of pressed keys
        var remaining = keys.slice(0),
            pressed = Object.keys(down).map(function (num) { return parseInt(num, 10); }),
            indexOfKey;
        // Remove pressedKeys from remainingKeys
        jQuery.each(pressed, function (i, key) {
            if (down[key] === true) {
                down[key] = false;
                indexOfKey = remaining.indexOf(key);
                if (indexOfKey > -1) {
                    remaining.splice(indexOfKey, 1);
                }
            }
        });
        // If we hit all the keys, fire off handler
        if (remaining.length === 0) {
            handler(event);
        }
    });
};

例如,向 st 开火,

jQuery.multipress([83, 84], function () { alert('You pressed s-t'); })
肯定有更好的解决方案,但是如果您只是添加按键以触发调试代码等,那么最好不要添加另一个依赖项。
2021-03-29 06:06:49

不。keypress将针对每个被按下的单个键触发 - 除了 CTRL、ALT 和 SHIFT 等修饰键之外,您可以将它们与其他键组合,只要它只是一个其他键。

这是一个基于 Maciej 回答的 jQuery 解决方案https://stackoverflow.com/a/21522329/

// the array to add pressed keys to
var keys = [];
// listen for which key is pressed
document.addEventListener('keydown', (event) => {
    if ($.inArray(event.keyCode, keys) == -1) {
        keys.push(event.keyCode);
    }
    console.log('keys array after pressed = ' + keys);
});
// listen for which key is unpressed
document.addEventListener('keyup', (event) => {
    // the key to remove
    var removeKey = event.keyCode;
  // remove it
    keys = $.grep(keys, function(value) {
        return value != removeKey;
    });
    console.log('keys array after unpress = ' + keys);
});
// assign key number to a recognizable value name
var w = 87;
var d = 68;
var s = 83;
var a = 65;
// determine which keys are pressed
document.addEventListener('keydown', (event) => {
  if ($.inArray(w, keys) != -1 && $.inArray(d, keys) != -1) { // w + d
    console.log('function for w + d combo');
  } else if ($.inArray(s, keys) != -1 && $.inArray(a, keys) != -1) { // s + a
    console.log('function for s + a combo');
  }
})

小提琴演示

https://jsfiddle.net/Hastig/us00zdo6/