it-swarm.com.de

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

Hier ist mein Code:

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

Ich möchte diesem Code eine Tastenkombination hinzufügen. Wie kann ich das tun, damit die Funktion auch ausgeführt werden kann, wenn eine Schaltfläche angeklickt wird?

Hat versucht, eine else-if-Anweisung hinzuzufügen, aber es funktioniert nicht, keine Ideen?

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

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

ein Event-Handler für das Keyup-Ereignis des Dokuments scheint eine geeignete Lösung zu sein

// define a handler
function doc_keyUp(e) {

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

Wenn Sie nur nach suchen, nachdem Sie eine Taste gedrückt haben, versuchen Sie Folgendes:

In diesem Beispiel drücken Sie "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;
  }
}

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

Bitte beachten Sie auch, dass es einen Unterschied für die Schlüsselnummern gibt, ob Sie onkeypress oder onkeyup verwenden. Weitere Informationen hier: w3 schools KeyboardEvent keyCode-Eigenschaft

3
mr.mii

Fangen Sie den Schlüsselcode und rufen Sie dann Ihre Funktion auf. Dieses Beispiel fängt dieESCTaste 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);
    });
});

Für dieses Beispiel benötigen Sie JQUERY .

1
s15199d

Diese scheinen alle die veralteten Eigenschaften keyCode und which zu verwenden. 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();
})

Hinweis: ctrl + t ist möglicherweise bereits dem Öffnen eines neuen Browser-Registers zugewiesen

1
xr280xr
//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
1
Sikha

Hier sind einige Dinge, die Sie verwenden können, wenn Sie möchten. Sie können einen Schlüsselbund und einen Handler damit registrieren. 

Kommentare sind im Code enthalten, aber kurz gesagt geht es so:
Er richtet einen Listener für die document ein und verwaltet einen Hash mit den Tastenkombinationen, für die Sie hören möchten.
* Wenn Sie einen Schlüssel (eine Kombination) registrieren, auf den Sie warten möchten, übergeben Sie den Schlüsselcode (vorzugsweise als Konstante aus der exportierten "key" -Eigenschaft, zu der Sie weitere Konstanten hinzufügen können), eine Handler-Funktion und möglicherweise auch eine Ein Optionshash, in dem Sie sagen, ob die Tasten Strg und/oder Alt in Ihre Pläne für diesen Schlüssel einbezogen sind.
* Wenn Sie einen Schlüssel abmelden (Kombination), übergeben Sie einfach den Schlüssel und den optionalen Hash für Strg/Alt-Ness.

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

Es ist nicht schrecklich getestet, schien aber OK zu funktionieren. 

Schauen Sie auf http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx , um eine Menge Schlüsselcodes zu finden.

1
npup

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()
  }
}
1
Wesos de Queso

Lösung:

var activeKeys = [];

//determine operating system
var os = false;
window.addEventListener('load', function() {
  var userAgent = navigator.appVersion;
  if (userAgent.indexOf("Win") != -1) os = "windows";
  if (userAgent.indexOf("Mac") != -1) os = "osx";
  if (userAgent.indexOf("X11") != -1) os = "unix";
  if (userAgent.indexOf("Linux") != -1) os = "linux";
});

window.addEventListener('keydown', function(e) {
  if (activeKeys.indexOf(e.which) == -1) {
    activeKeys.Push(e.which);
  }

  if (os == 'osx') {

  } else {
    //use indexOf function to check for keys being pressed IE
    if (activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1) {
      console.log('you are trying to paste with control+v keys');
    }
    /*
      the control and v keys (for paste)
      if(activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1){
        command and v keys are being pressed
      }
    */
  }
});

window.addEventListener('keyup', function(e) {
  var result = activeKeys.indexOf(e.which);
  if (result != -1) {
    activeKeys.splice(result, 1);
  }
});

Erklärung: Ich bin auf dasselbe Problem gestoßen und habe meine eigene Lösung gefunden. e.metaKey schien mit dem Keyup-Ereignis in Chrome und Safari nicht zu funktionieren. Ich bin mir jedoch nicht sicher, ob es für meine Anwendung spezifisch war, da andere Algorithmen einige wichtige Ereignisse blockierten und der Metaschlüssel möglicherweise versehentlich blockiert wurde.

Dieser Algorithmus überwacht, ob Tasten gedrückt werden, und fügt sie einer Liste von Tasten hinzu, die gerade gedrückt werden. Beim Loslassen wird der Schlüssel aus der Liste entfernt. Suchen Sie nach simultanen Schlüsseln in der Liste, indem Sie mit indexOf nach Schlüsselcodes im Array suchen.

0
www139