如何向现有JavaScript函数添加JavaScript键盘快捷键？

这是我的密码：

function pauseSound() {
    var pauseSound = document.getElementById("backgroundMusic");
    pauseSound.pause(); 
}

我想在这段代码中添加一个键盘快捷键，我如何才能做到这一点，以便在单击按钮时也可以执行该功能

尝试添加else-if语句，但无效，有什么想法吗

function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 88) {
        pauseSound();
    }

    else if (e.ctrlKey && e.keyCode == 84) {
        playSound();
    }
}

---

文档的keyup事件的事件处理程序似乎是一个合适的解决方案

注意：

KeyboardEvent.keyCode

被弃用，取而代之的是

key

// define a handler
function doc_keyUp(e) {

    // this would test for whichever key is 40 (down arrow) and the ctrl key at the same time
    if (e.ctrlKey && e.key === 'ArrowDown') {
        // call your function to do the thing
        pauseSound();
    }
}
// register the handler 
document.addEventListener('keyup', doc_keyUp, false);

---

捕获键代码，然后调用函数。此示例捕获ESC键并调用您的函数：

function getKey(key) {
    if ( key == null ) {
        keycode = event.keyCode;
    // To Mozilla
    } else {
        keycode = key.keyCode;
    }
    // Return the key in lower case form    
    if (keycode ==27){
        //alert(keycode);
        pauseSound();
        return false;
    }
    //return String.fromCharCode(keycode).toLowerCase();
}
$(document).ready( function (){
    $(document).keydown(function (eventObj){
        //alert("Keydown: The key is: "+getKey(eventObj));
        getKey(eventObj);
    });
});

---

您将需要为这个例子做准备。

如果您需要，这里有一些东西可以使用。您可以使用它注册一组密钥和处理程序

注释在代码中，但我认为它是这样的：
它在

文档上设置一个监听器

，并管理一个包含要侦听的密钥组合的哈希。
*注册要侦听的键（组合）时，您将提交键代码（最好是从导出的“键”属性中获取的常量，您可以为自己添加更多常量）、处理程序函数和选项散列，您可以在其中说明此键的计划中是否包含ctrl键和/或alt键。
*当您取消注册一个键（组合）时，您只需提交该键和ctrl/alt的可选哈希

window.npup = (function keypressListener() {
    // Object to hold keyCode/handler mappings
    var mappings = {};
    // Default options for additional meta keys
    var defaultOptions = {ctrl:false, alt:false};
    // Flag for if we're running checks or not
    var active = false;

    // The function that gets called on keyup.
    // Tries to find a handler to execute
    function driver(event) {
        var keyCode = event.keyCode, ctrl = !!event.ctrlKey, alt = !!event.altKey;
        var key = buildKey(keyCode, ctrl, alt);
        var handler = mappings[key];
        if (handler) {handler(event);}
    }

    // Take the three props and make a string to use as key in the hash
    function buildKey(keyCode, ctrl, alt) {return (keyCode+'_'+ctrl+'_'+alt);}

    function listen(keyCode, handler, options) {
        // Build default options if there are none submitted
        options = options || defaultOptions;
        if (typeof handler!=='function') {throw new Error('Submit a handler for keyCode #'+keyCode+'(ctrl:'+!!options.ctrl+', alt:'+options.alt+')');}
        // Build a key and map handler for the key combination
        var key = buildKey(keyCode, !!options.ctrl, !!options.alt);
        mappings[key] = handler;
    }

    function unListen(keyCode, options) {
        // Build default options if there are none submitted
        options = options || defaultOptions;
        // Build a key and map handler for the key combination
        var key = buildKey(keyCode, !!options.ctrl, !!options.alt);
        // Delete what was found
        delete mappings[key];
    }

    // Rudimentary attempt att cross-browser-ness
    var xb = {
        addEventListener: function (element, eventName, handler) {
            if (element.attachEvent) {element.attachEvent('on'+eventName, handler);}
            else {element.addEventListener(eventName, handler, false);}
        }
        , removeEventListener: function (element, eventName, handler) {
            if (element.attachEvent) {element.detachEvent('on'+eventName, handler);}
            else {element.removeEventListener(eventName, handler, false);}
        }
    };

    function setActive(activate) {
        activate = (typeof activate==='undefined' || !!activate); // true is default
        if (activate===active) {return;} // already in the desired state, do nothing
        var addOrRemove = activate ? 'addEventListener' : 'removeEventListener';
        xb[addOrRemove](document, 'keyup', driver);
        active = activate;
    }

    // Activate on load
    setActive();

    // export API
    return {
        // Add/replace handler for a keycode.
        // Submit keycode, handler function and an optional hash with booleans for properties 'ctrl' and 'alt'
        listen: listen
        // Remove handler for a keycode
        // Submit keycode and an optional hash with booleans for properties 'ctrl' and 'alt'
        , unListen: unListen
        // Turn on or off the whole thing.
        // Submit a boolean. No arg means true
        , setActive: setActive
        // Keycode constants, fill in your own here
        , key : {
            VK_F1 : 112
            , VK_F2: 113
            , VK_A: 65
            , VK_B: 66
            , VK_C: 67
        }
    };
})();

// Small demo of listen and unListen
// Usage:
//   listen(key, handler [,options])
//   unListen(key, [,options])
npup.listen(npup.key.VK_F1, function (event) {
    console.log('F1, adding listener on \'B\'');
    npup.listen(npup.key.VK_B, function (event) {
        console.log('B');
    });
});
npup.listen(npup.key.VK_F2, function (event) {
    console.log('F2, removing listener on \'B\'');
    npup.unListen(npup.key.VK_B);
});
npup.listen(npup.key.VK_A, function (event) {
    console.log('ctrl-A');
}, {ctrl: true});
npup.listen(npup.key.VK_A, function (event) {
    console.log('ctrl-alt-A');
}, {ctrl: true, alt: true});
npup.listen(npup.key.VK_C, function (event) {
    console.log('ctrl-alt-C => It all ends!');
    npup.setActive(false);
}, {ctrl: true, alt: true});

它没有经过严格的测试，但似乎工作正常

查看以查找大量要使用的键码，

解决方案：

var-activeKeys=[]；
//确定操作系统
var-os=false；
addEventListener（'load'，function（））{
var userAgent=navigator.appVersion；
如果（userAgent.indexOf（“Win”）！=-1）os=“windows”；
如果（userAgent.indexOf（“Mac”）！=-1）os=“osx”；
if（userAgent.indexOf（“X11”）！=-1）os=“unix”；
if（userAgent.indexOf（“Linux”）！=-1）os=“Linux”；
});
window.addEventListener（'keydown'，函数（e）{
if（activeKeys.indexOf（e.which）=-1）{
活动键。按下（例如哪个键）；
}
如果（os=='osx'）{
}否则{
//使用indexOf功能检查按键是否按下
if（activeKeys.indexOf（17）！=-1&&activeKeys.indexOf（86）！=-1）{
log（'您正试图使用control+v键粘贴'）；
}
/*
控件和v键（用于粘贴）
if（activeKeys.indexOf（17）！=-1&&activeKeys.indexOf（86）！=-1）{
正在按command和v键
}
*/
}
});
window.addEventListener（'keyup'，函数（e）{
var result=activeKeys.indexOf（e.which）；
如果（结果！=-1）{
活动键。拼接（结果，1）；
}
});如果您仅在按键后搜索触发事件，请尝试以下操作：

在本例中，按“ALT+a”

document.onkeyup=function(e){
  var e = e || window.event; // for IE to cover IEs window event-object
  if(e.altKey && e.which == 65) {
    alert('Keyboard shortcut working!');
    return false;
  }
}

这是一把小提琴：

还请注意，无论您使用的是onkeypress还是onkeypup，按键代码编号都有所不同。更多信息请点击这里：
这对我很有用

document.onkeyup=function(e){
  var e = e || window.event;
  if(e.which == 37) {
    $("#prev").click()
  }else if(e.which == 39){
    $("#next").click()
  }
}

这些似乎都使用了弃用的
keyCode
和
属性。以下是一个使用jQuery连接事件的未弃用版本：

$("body").on("keyup", function (e) {
    if(e.ctrlKey && e.key == 'x')
        pauseSound();
    else if(e.ctrlKey && e.key == 't')
        playSound();
})

注意：ctrl+t可能已经被指定打开一个新的浏览器选项卡
我知道我参加聚会迟到了，但下面是我的解决方案
解释

当您调用my函数时，它将创建一个名为
currentKeys
的数组；这些是将在那一刻被按下的钥匙
每次按下一个键（onkeydown），它都会被添加到
currentKeys
数组中
当按键被释放（onkeyup）时，数组被重置，这意味着此时没有按键被按下
每次它都会检查快捷方式是否匹配。如果它这样做，它将调用处理程序
这很有效，谢谢。由于“playSound（）”需要另一个快捷键，因此如何使用此代码两次？添加一个类似于第一个if语句的else if语句，但根据需要更改keycode。从那里进行playSound（）调用。如果要对两个活动使用同一个键，则必须设置一个标志变量，并在每次按下该键时检查/设置它，以确定要执行的操作。那些不支持
addEventListener
的浏览器呢？IE是我使用过的唯一一个不支持的浏览器，您可以使用document.attachEvent（'onkeyup'，doc_keyUp）；应该有很多关于在调用函数之前检查函数是否存在的参考资料。我试图添加一个else-if，但它不起作用，请参阅主题文章以查看更新的代码。else-if-will-else-if（）{
}的实际语法。删除连字符。
.key
是不推荐使用的属性吗？虽然Safari中不支持该属性，但它看起来确实是建议使用的属性
$("body").on("keyup", function (e) {
    if(e.ctrlKey && e.key == 'x')
        pauseSound();
    else if(e.ctrlKey && e.key == 't')
        playSound();
})

HTMLElement.prototype.onshortcut = function(shortcut, handler) {
    var currentKeys = []
    
    function reset() {
        currentKeys = []
    }

    function shortcutMatches() {
        currentKeys.sort()
        shortcut.sort()

        return (
            JSON.stringify(currentKeys) ==
            JSON.stringify(shortcut)
        )
    }

    this.onkeydown = function(ev) {
        currentKeys.push(ev.key)

        if (shortcutMatches()) {
            ev.preventDefault()
            reset()
            handler(this)
        }

    }

    this.onkeyup = reset
}


document.body.onshortcut(["Control", "Shift", "P"], el => {
    alert("Hello!")
})