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

IT技术 javascript scripting keyboard shortcut
2021-02-20 03:41:21

这是我的代码:

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();
    }
}
6个回答

文档 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);
IE 是我使用过的唯一一个没有的,你会使用 document.attachEvent('onkeyup', doc_keyUp); 应该有很多关于在调用函数之前检查函数是否存在的参考。
2021-04-26 03:41:21
添加类似于第一个 if 语句的 else-if 语句,但根据需要更改键码。从那里调用 playSound() 。如果您想对两个活动使用相同的键,则必须设置一个标志变量,并在按下键时检查/设置它以确定要执行的操作。
2021-05-04 03:41:21
那些不支持的浏览器addEventListener呢?
2021-05-08 03:41:21
这很好用,谢谢。我怎么能使用这个代码两次,因为我需要另一个“playSound()”快捷键?
2021-05-10 03:41:21
我尝试添加一个 else-if 但它不起作用,请参阅主题帖子以查看更新的代码。
2021-05-16 03:41:21

如果您只是在按下按键后搜索触发事件,请尝试以下操作:

在本例中按“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;
  }
}

这是一个小提琴:https : //jsfiddle.net/dmtf6n27/38/

另请注意,无论您使用的是onkeypress还是onkeyup,键码编号都存在差异更多信息:w3 school KeyboardEvent keyCode 属性

//For single key: Short cut key for 'Z'
document.onkeypress = function (e) {
    var evt = window.event || e;
    switch (evt.keyCode) {
        case 90:  
            // Call your method Here
            break;
    }
}

//For combine keys like Alt+P
document.onkeyup = function (e) {
    var evt = window.event || e;   
        if (evt.keyCode == 80 && evt.altKey) {
            // Call Your method here   
        }
    }
}
    //ensure if short cut keys are case sensitive.
    //    If its not case sensitive then
    //check with the evt.keyCode values for both upper case and lower case. ......

我知道我迟到了,但这是我的解决方案

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!")
})

解释

  • 当您调用我的函数时,它会创建一个名为currentKeys;的数组这些是在那一刻将被按住的关键。
  • 每次按下一个键 (onkeydown) 时,它都会被添加到currentKeys数组中。
  • 当按键被释放 (onkeyup) 时,阵列被重置,意味着此时没有按键被按下
  • 每次它都会检查快捷方式是否匹配。如果这样做,它将调用处理程序

这对我有用

document.onkeyup=function(e){
  var e = e || window.event;
  if(e.which == 37) {
    $("#prev").click()
  }else if(e.which == 39){
    $("#next").click()
  }
}
我尝试使用,onkeyup但它在一次按下时运行了 18 次。改用onkeydown它,它只运行一次。
2021-04-30 03:41:21