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();
}
}
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);
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
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 .
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.
//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
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,
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()
}
}
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.