How can I add a JavaScript keyboard shortcut to an existing JavaScript Function?

Question

Here is my code:

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

I would like to add a keyboard shortcut to this code, how can I do this so that the function can also be executed when a button is clicked too?

Tried to add an else if statement but it doesn't work, any ideas?

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

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

Answer 1

An event handler for the document's keyup event seems like an appropriate solution.

Note: KeyboardEvent.keyCode was deprecated in favor of 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);

Answer 2

If you want to trigger an event after pressing a key, try:

In this example press ALT+a:

document.onkeyup = function () {
  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;
  }
}

Here is a fiddle: https://jsfiddle.net/dmtf6n27/38/

Please also note there is a difference for the keycode numbers, whether you are using onkeypress or onkeyup. W3 Schools' "KeyboardEvent keyCode" Property has more information.

Answer 3

//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. ......

Answer 4

Here's my solution:

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

• When you call my function, it will create an array called currentKeys; these are the keys that will are being held down at that moment.
• Every time a key is pressed, sensed because of onkeydown, it is added to the currentKeys array.
• When the keys are released, sensed because of onkeyup, the array is reset meaning that no keys are being pressed at that moment.
• Each time it will check if the shortcut matches. If it does it will call the handler.