在JavaScript中检测多个键的同时按下

Question

我正在尝试在JavaScript中检测多个关键组合。我需要检测Ctrl+左箭头、Ctrl+右箭头、右箭头和左箭头。目前，我只是尝试检测何时按下了Ctrl。以下是我的代码（JSFiddle链接）：

var keys = {};

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

    printKeys();
});

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

    printKeys();
});

function printKeys() {
    var html = '';
    for (var i in keys) {
        html += '<p>i: ' + i + '</p>'
        if (!keys.hasOwnProperty(i)) continue;
        if ($.inArray(17, keys) > -1) 
            html += '<p>ctrl was pressed, return val: ' + $.inArray(17, keys) + '</p>'
    }
    $('#out').html(html);
}

我想我并不真正理解JQuery的inArray应该如何工作，因为当我按下任意键时，它只返回-1。if语句也计算为true，而我只希望在按下Ctrl时才会这样做。我该如何修复这个问题，使我的if语句正确检测到Ctrl键被按下？一旦我解决了这个问题，我就能够弄清楚剩下的部分了。

编辑：更改if语句以评估inArray返回的> -1。

- tnw

---

$.inArray <-- 如果你不理解它的工作原理，这可能是一个很好的起点 :) - Andrew Whitaker

@AndrewWhitaker 感谢您，现在if语句的写法是if ($.inArray(17, keys) > -1)，但是尽管html += '<p>i: ' + i + '</p>'输出了17，它仍然没有检测到17在数组中。 - tnw

Answer 1

在JavaScript中，要检测控制键是否被按下，需要捕获window.event.ctrlKey的值。以下是一个示例函数，用于使用ctrl+v键盘快捷方式阻止从剪贴板粘贴到字段中：

    function BlockControlV() {
        var keyPressed = window.event.keyCode;
        var ctrlPressed = window.event.ctrlKey;
        if (ctrlPressed && keyPressed == 86) {

            var ClipBoardData = window.clipboardData.getData('Text')
            ClipBoardData = trim(ClipBoardData)

            if (ClipBoardData != '') {
                if (isNaN(ClipBoardData) == true) {
                    window.event.keyCode = 0;
                }
            }
            else {
                window.event.keyCode = 0;
            }
        }
    } 

虽然与您尝试做的事情不太相关，但您应该能够弄清楚您应该朝哪个方向前进。

- ORION

Answer 2

找出ctrl是否被按下的最简单方法是测试event对象的ctrlKey属性：

$(document).keypress(function(e){
    console.log(e.which, e.ctrlKey);
});

JS Fiddle演示。

我本来想提供一个更相关的演示，但是我不知道那个演示的目的是什么。

- David Thomas

Answer 3

首先，keys 不是一个数组，而是一个对象。因此，在您的函数中，您可以简单地编写以下代码，而不是 2 个分开的 if 块：

if (keys.hasOwnProperty(i)) {
  ...
}

其次，jQuery为事件对象附加了一个非常方便的属性：ctrlKey。

在您的keydown事件处理程序中，将对printKeys的调用包装在if语句中：

if (e.ctrlKey) {
  printKeys();
}

最后，要检测是否按下 ctrl 键 + (任意其他键)，只需检查事件的 which 属性是否对应于您要查找的 keyCodes 中的任何一个

- stinkycheeseman

---

明白了。虽然这回答了我的检测ctrl键的问题，但我不知道如何使用它来检测“ctrl + left”或类似的组合键。 - tnw

Answer 4

首先，你的 else 分支缺少大括号 {}。

js Fiddle DEMO

if (i == 17) {
    html += '<p>ctrl</p>';
} else {}

运行演示并在单击Ctrl键时观察文本“ctrl”出现。

e.ctrlKey是检测Ctrl键单击的最简单方法。

要检测Ctrl +左键此处演示

$(document).keydown(function(e){
    if(e.keyCode == 37 && e.ctrlKey)
        alert("Control + Left Clicked"); 
});

- Venkata Krishna

Answer 5

您可以轻松使用返回的event对象进行检测。该对象还包含有关所有控制键的信息：

• ctrlKey - 是否按下了Control键？
• shiftKey - 是否按下了Shift键？
• altKey - 是否按下了Alt键？

所有这些属性都是布尔值（如果按下按钮，则为true，否则为false）。

以下是JSFiddle中上述属性的演示。

- Karlen Kishmiryan