Wie kann ich einer vorhandenen JavaScript-Funktion eine Tastenkombination hinzufügen?

Question 1

Hier ist mein Code:

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

Ich möchte diesem Code gerne eine Tastenkombination hinzufügen, wie kann ich dies tun, damit die Funktion auch ausgeführt werden kann, wenn auf eine Schaltfläche geklickt wird?

Versucht, eine andere if-Anweisung hinzuzufügen, aber es funktioniert nicht, irgendwelche Ideen?

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

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

Question 2

Ein Event-Handler für das keyup-Event des Dokuments scheint eine geeignete Lösung zu sein.

Notiz: KeyboardEvent.keyCode wurde zugunsten von verworfen 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);

Question 3

Wenn Sie nach dem Drücken einer Taste ein Ereignis auslösen möchten, versuchen Sie Folgendes:

Drücken Sie in diesem Beispiel 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;
  }
}

Hier ist eine Geige: https://jsfiddle.net/dmtf6n27/38/

Bitte beachten Sie auch, dass die Keycode-Nummern unterschiedlich sind, unabhängig davon, ob Sie verwenden onkeypress oder onkeyup. „KeyboardEvent keyCode“-Eigenschaft der W3-Schulen hat mehr Informationen.

Question 4

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

Question 5

Hier ist meine Lösung:

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

Wenn Sie meine Funktion aufrufen, wird ein Array mit dem Namen erstellt currentKeys; Dies sind die Tasten, die in diesem Moment gedrückt werden.
Jedes Mal, wenn eine Taste gedrückt wird, aufgrund von gefühlt onkeydownes wird hinzugefügt currentKeys Reihe.

Wenn die Tasten losgelassen werden, wird aufgrund von gefühlt onkeyupwird das Array zurückgesetzt, was bedeutet, dass in diesem Moment keine Tasten gedrückt werden.
Jedes Mal wird überprüft, ob die Verknüpfung übereinstimmt. Wenn dies der Fall ist, wird der Handler angerufen.

Question 6

Das hat bei mir funktioniert

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

Question 7

Fangen Sie den Schlüsselcode ab und rufen Sie dann Ihre Funktion auf. Dieses Beispiel fängt die ESC Taste und ruft Ihre Funktion auf:

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);
    });
});

Du brauchst JQUERY für dieses Beispiel.

Question 8

Diese scheinen alle die veralteten zu verwenden keyCode und which Eigenschaften. Hier ist eine nicht veraltete Version, die jQuery verwendet, um das Ereignis zu verbinden:

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

Notiz: Strg+t kann bereits dem Öffnen eines neuen Browser-Tabs zugewiesen sein.