web-dev-qa-db-fra.com

Comment puis-je ajouter un raccourci clavier JavaScript à une fonction JavaScript existante?

Voici mon code:

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

Je voudrais ajouter un raccourci clavier à ce code. Comment puis-je procéder afin que la fonction puisse également être exécutée lorsqu'un clic est effectué sur un bouton?

J'ai essayé d'ajouter une autre déclaration, mais cela ne fonctionne pas, des idées?

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

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

un gestionnaire d'événements pour l'événement keyup du document semble être une solution appropriée

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

Si vous ne recherchez que déclenchez un événement après avoir appuyé sur une touche, essayez ceci:

Dans cet exemple, appuyez sur '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;
  }
}

Voici un violon: https://jsfiddle.net/dmtf6n27/38/

Notez également qu'il existe une différence entre les numéros de code, que vous utilisiez onkeypress ou onkeyup. Plus d'informations ici: w3 schools KeyboardEvent, propriété keyCode

3
mr.mii

Fangen Sie den Schlüsselcode und rufen Sie dann Ihre Funktion auf. Dieses Beispiel fängt dieESCGoûtez et perdez de la joie au:

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

Ceux-ci semblent tous utiliser les propriétés obsolètes keyCode et which. Voici une version non obsolète utilisant jQuery pour relier l'événement:

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

Remarque: ctrl + t est peut-être déjà affecté à l'ouverture d'un nouvel onglet de navigateur.

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

Voici quelques trucs à utiliser si vous voulez. Vous pouvez enregistrer un tas de clés et un gestionnaire avec celui-ci. 

Les commentaires sont dans le code, mais je pense que ça va comme ceci:
Il configure un auditeur sur la document et gère un hachage avec les combinaisons de touches pour lesquelles vous souhaitez écouter.
* Lorsque vous enregistrez une clé (combinaison) à écouter, vous soumettez le code clé (de préférence sous forme de constante extraite de la propriété "clé" exportée, à laquelle vous pouvez ajouter davantage de constantes), une fonction de gestionnaire et éventuellement un hachage d'options où vous dites si les touches ctrl et/ou alt sont impliquées dans vos plans pour cette clé.
* Lorsque vous désenregistrez une clé (combinaison), vous ne soumettez que la clé et le hachage optionnel pour 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});

Ce n'est pas terriblement testé, mais semblait fonctionner correctement. 

Regardez http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx pour trouver beaucoup de keyCodes à utiliser,

1
npup

Cela a fonctionné pour moi

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

Solution:

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

Explication: J'ai rencontré le même problème et proposé ma propre solution. e.metaKey ne semblait pas fonctionner avec l'événement keyup dans Chrome et Safari. Cependant, je ne suis pas sûr que cela soit spécifique à mon application, car d'autres algorithmes bloquaient certains événements clés et j'avais peut-être bloqué par erreur la clé méta.

Cet algorithme surveille les touches qui tombent et les ajoute ensuite à une liste de touches actuellement enfoncées. Une fois relâchée, la clé est retirée de la liste. Recherchez des clés simultanées dans la liste en utilisant indexOf pour rechercher les codes de clé dans le tableau.

0
www139