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

前端 未结 8 1866
忘了有多久
忘了有多久 2020-11-27 04:03

Here is my code:

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

I wo

相关标签:
8条回答
  • 2020-11-27 05:02

    Here's some stuff to use if you want. You can register a bunch of keys and handler with it.

    Comments are in the code, but i short it goes like this:
    It sets up a listener on the document and manages a hash with the key combinations for which you want to listen.
    * When you register a key (combination) to listen for, you submit the keycode (preferrably as a constant taken from the exported "key" property, to which you can add more constants for yourself), a handler function and possibly an options hash where you say if the ctrl and/or alt key are involved in your plans for this key.
    * When you de-register a key (combination) you just submit the key and the optional hash for ctrl/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});
    

    It is not terribly tested, but seemed to work OK.

    Look at http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx to find a lot of keyCodes to use,

    0 讨论(0)
  • 2020-11-27 05:07

    If you are only searching for trigger an event after pressing a key, try this:

    In this example press '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;
      }
    }
    

    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. More info here: w3 schools KeyboardEvent keyCode Property

    0 讨论(0)
提交回复
热议问题