如何在jQuery中绑定键盘组合键Ctrl+X+Return

Question

有没有办法在jquery（或javascript）中捕捉键盘组合键ctrl+x+return，如果用户按下此键组合，则调用一个函数。我尝试使用jquery热键插件，但没有成功。

- user1304683

Answer 1

此答案已更新：

看一下Keystrokes，它允许您轻松绑定快捷键。它比其祖先KeyboardJS更小、更易于使用，并支持主要的UI库，如React和Vue。

bindKeyCombo('ctrl > x + enter', () => { /*do stuff on press*/ })

// or

bindKeyCombo('ctrl > x + enter', {
    onPressed: () => { /*do stuff on press*/ },
    onReleased: () => { /*do stuff on release*/ }
})

我更新了我的答案，因为已经过去十年，建议使用的库已经被取代了。

这是我十年前的先前答案：

您可能会发现使用KeyboardJS是一个更好的解决方案。它非常简单易用。这里是文档；

KeyboardJS.on('ctrl + x + enter', function() {
    //do stuff on press
}, function() {
    //do stuff on release
});

另外，如果你想强制在按下 x 或 enter 前先按下 ctrl，你可以使用以下方法

KeyboardJS.on('ctrl > x + enter', function() {
    //do stuff on press
}, function() {
    //do stuff on release
});

- Robert Hurst

---

我尝试了jquery hotkeys和mousetrap，但都没有起作用...似乎已经有一段时间没有更新了。这个最近更新过，现在可以使用！ - Chris

Answer 2

你可以使用键盘按下事件对象的ctrlKey属性。

$(document).keypress(function(e) {
    if(e.ctrlKey) {
        // do code to test other keys
    }
});

同时，Shift和Alt保留键也有属性，但回车键的keyCode为13。

你为什么不能尝试不同的组合键 - 比如Ctrl-Alt-X？回车键通常保留用于触发表单提交和其他网页事件。

- benedict_w

---

我发现可能存在一个问题，特别是跨浏览器的ctrl-return组合键 - 更多信息请参见此处：https://dev59.com/tXA65IYBdhLWcg3w-z1A - benedict_w

Answer 3

$("body").bind("keydown",keyDown);

function keyDown(e){
    if((e.ctrlKey)&&(e.keyCode == 88)&&(e.keyCode == 13)){
        alert("Keys down are Ctrl + x + Return");
    }
}

- Ranganadh Paramkusam

Answer 4

使用全局布尔数组var keys = []来检查按键是否被按下。然后使用以下函数添加全局热键：

window.addGlobalHotkey = function(callback,keyValues){
    if(typeof keyValues === "number")
        keyValues = [keyValues];

    var fnc = function(cb,val){
        return function(e){
            keys[e.keyCode] = true;
            executeHotkeyTest(cb,val);
        };        
    }(callback,keyValues);
    window.addEventListener('keydown',fnc);
    return fnc;
};

如您所见，它添加了一个新的监听器到事件'keydown'中。这个监听器首先将keys中相应的值设置为true，然后执行一个测试，检查给定的keyValues是否当前为真。请注意，您不能删除keys[e.keyCode] = true并将其放入另一个监听器中，因为这可能会导致错误的回调顺序（首先是热键测试，然后是按键映射）。executeHotkeyTest本身也非常简单：

window.executeHotkeyTest = function(callback,keyValues){
    var allKeysValid = true;

    for(var i = 0; i < keyValues.length; ++i)
        allKeysValid = allKeysValid && keys[keyValues[i]];

    if(allKeysValid)
        callback();
};

最后，您需要添加另一个监听器到keyup，以清除已释放的键从keys中。

window.addEventListener('keyup',function(e){
    keys[e.keyCode] = false;
});

现在你可以使用 addGlobalHotkey(callback,[13,17,88]) 来为 ctrl+x+enter 添加热键：

addGlobalHotkey(function(){
    document.body.appendChild(
        document.createElement('div').appendChild(
            document.createTextNode('Ctrl + x + Enter down')
    ).parentNode);
},[88,13,17]);

JSFiddle演示

不必为每个热键添加一个监听器，您可以使用全局的[[callback1,values1],[callback2,values2],...]数组。

重要提示：在IE 9版本之前，您需要使用attachEvent而不是addEventListener。由于您已经在使用jQuery，因此可以使用.on(...)或.keydown代替。

- Zeta

Answer 5

只需像这样输入：

    document.getElementById('yourelementid').onkeydown = function(){
       if(event.ctrlKey===true && event.keyCode==88){
           //your code goes here
       }
    }
//no depedency needs. pretty straight-forward

- Faris Rayhan