Comment détecter si plusieurs touches sont enfoncées à la fois en utilisant JavaScript?


173

J'essaye de développer un moteur de jeu JavaScript et j'ai rencontré ce problème:

  • Lorsque j'appuie sur SPACEle personnage saute.
  • Quand j'appuie, le personnage se déplace vers la droite.

Le problème est que lorsque j'appuie à droite et que j'appuie sur espace, le personnage saute puis s'arrête de bouger.

J'utilise la keydownfonction pour appuyer sur la touche. Comment puis-je vérifier si plusieurs touches sont pressées à la fois?


3
Voici une démo d'une page Web qui imprime automatiquement une liste de toutes les touches qui sont enfoncées: stackoverflow.com/a/13651016/975097
Anderson Green

Réponses:


327

Remarque: keyCode est désormais obsolète.

La détection de plusieurs touches est facile si vous comprenez le concept

La façon dont je le fais est comme ceci:

var map = {}; // You could also use an array
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}

Ce code est très simple: comme l'ordinateur ne passe qu'une seule touche à la fois, un tableau est créé pour garder une trace de plusieurs touches. Le tableau peut ensuite être utilisé pour rechercher une ou plusieurs clés à la fois.

Juste pour expliquer, disons que vous appuyez sur Aet B, chacun déclenche un keydownévénement qui prend map[e.keyCode]la valeur de e.type == keydown, qui prend la valeur true ou false . Maintenant, les deux map[65]et map[66]sont réglés sur true. Lorsque vous relâchez A, l' keyupévénement se déclenche, ce qui fait que la même logique détermine le résultat opposé pour map[65](A), qui est maintenant faux , mais puisque map[66](B) est toujours "down" (il n'a pas déclenché d'événement keyup), cela reste vrai .

Le maptableau, à travers les deux événements, ressemble à ceci:

// keydown A 
// keydown B
[
    65:true,
    66:true
]
// keyup A
// keydown B
[
    65:false,
    66:true
]

Il y a deux choses que vous pouvez faire maintenant:

A) Un enregistreur de frappe ( exemple ) peut être créé comme référence pour plus tard lorsque vous souhaitez comprendre rapidement un ou plusieurs codes de clé. En supposant que vous avez défini un élément html et que vous l'avez pointé avec la variable element.

element.innerHTML = '';
var i, l = map.length;
for(i = 0; i < l; i ++){
    if(map[i]){
        element.innerHTML += '<hr>' + i;
    }
}

Remarque: vous pouvez facilement saisir un élément par son idattribut.

<div id="element"></div>

Cela crée un élément html qui peut être facilement référencé en javascript avec element

alert(element); // [Object HTMLDivElement]

Vous n'avez même pas besoin de l'utiliser document.getElementById()ou $()de l'attraper. Mais pour des raisons de compatibilité, l'utilisation de jQuery $()est plus largement recommandée.

Assurez-vous simplement que la balise de script vient après le corps du HTML. Conseil d'optimisation : la plupart des sites Web de grande renommée placent la balise script après la balise body pour l'optimisation. Cela est dû au fait que la balise de script empêche le chargement d'autres éléments jusqu'à ce que le téléchargement de son script soit terminé. Le placer avant le contenu permet au contenu de se charger à l'avance.

B (qui est là où réside votre intérêt) Vous pouvez vérifier une ou plusieurs clés à la fois où /*insert conditional here*/était, prenez cet exemple:

if(map[17] && map[16] && map[65]){ // CTRL+SHIFT+A
    alert('Control Shift A');
}else if(map[17] && map[16] && map[66]){ // CTRL+SHIFT+B
    alert('Control Shift B');
}else if(map[17] && map[16] && map[67]){ // CTRL+SHIFT+C
    alert('Control Shift C');
}

Edit : Ce n'est pas l'extrait de code le plus lisible. La lisibilité est importante, vous pouvez donc essayer quelque chose comme ceci pour le rendre plus facile pour les yeux:

function test_key(selkey){
    var alias = {
        "ctrl":  17,
        "shift": 16,
        "A":     65,
        /* ... */
    };

    return key[selkey] || key[alias[selkey]];
}

function test_keys(){
    var keylist = arguments;

    for(var i = 0; i < keylist.length; i++)
        if(!test_key(keylist[i]))
            return false;

    return true;
}

Usage:

test_keys(13, 16, 65)
test_keys('ctrl', 'shift', 'A')
test_key(65)
test_key('A')

Est-ce mieux?

if(test_keys('ctrl', 'shift')){
    if(test_key('A')){
        alert('Control Shift A');
    } else if(test_key('B')){
        alert('Control Shift B');
    } else if(test_key('C')){
        alert('Control Shift C');
    }
}

(fin de modification)


Cet exemple vérifie pour CtrlShiftA, CtrlShiftBetCtrlShiftC

C'est aussi simple que ça :)

Remarques

Suivi des KeyCodes

En règle générale, il est recommandé de documenter le code, en particulier des éléments tels que les codes clés (comme // CTRL+ENTER), afin que vous puissiez vous souvenir de ce qu'ils étaient.

Vous devez également mettre les codes clés dans le même ordre que la documentation ( CTRL+ENTER => map[17] && map[13], PAS map[13] && map[17]). De cette façon, vous ne serez jamais confus lorsque vous devez revenir en arrière et modifier le code.

Un gotcha avec des chaînes if-else

Si vous recherchez des combinaisons de quantités différentes (comme CtrlShiftAltEnteret CtrlEnter), placez des combos plus petits après des combos plus grands, sinon les combos plus petits remplaceront les combos plus grands s'ils sont assez similaires. Exemple:

// Correct:
if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
    alert('Whoa, mr. power user');
}else if(map[17] && map[13]){ // CTRL+ENTER
    alert('You found me');
}else if(map[13]){ // ENTER
    alert('You pressed Enter. You win the prize!')
}

// Incorrect:
if(map[17] && map[13]){ // CTRL+ENTER
    alert('You found me');
}else if(map[17] && map[16] && map[13]){ // CTRL+SHIFT+ENTER
    alert('Whoa, mr. power user');
}else if(map[13]){ // ENTER
    alert('You pressed Enter. You win the prize!');
}
// What will go wrong: When trying to do CTRL+SHIFT+ENTER, it will
// detect CTRL+ENTER first, and override CTRL+SHIFT+ENTER.
// Removing the else's is not a proper solution, either
// as it will cause it to alert BOTH "Mr. Power user" AND "You Found Me"

Gotcha: "Cette combinaison de touches continue de s'activer même si je n'appuie pas sur les touches"

Lorsque vous traitez des alertes ou de tout ce qui prend le focus de la fenêtre principale, vous souhaiterez peut-être inclure map = []pour réinitialiser le tableau une fois la condition terminée. C'est parce que certaines choses, comme alert(), éloignent le focus de la fenêtre principale et empêchent l'événement 'keyup' de se déclencher. Par exemple:

if(map[17] && map[13]){ // CTRL+ENTER
    alert('Oh noes, a bug!');
}
// When you Press any key after executing this, it will alert again, even though you 
// are clearly NOT pressing CTRL+ENTER
// The fix would look like this:

if(map[17] && map[13]){ // CTRL+ENTER
    alert('Take that, bug!');
    map = {};
}
// The bug no longer happens since the array is cleared

Gotcha: Paramètres par défaut du navigateur

Voici une chose ennuyeuse que j'ai trouvée, avec la solution incluse:

Problème: étant donné que le navigateur a généralement des actions par défaut sur les combinaisons de touches (comme CtrlDactive la fenêtre des signets ou CtrlShiftCactive skynote sur maxthon), vous pouvez également ajouter return falseaprès map = [], afin que les utilisateurs de votre site ne soient pas frustrés lorsque le "fichier en double" fonction, étant mis CtrlD, marque la page à la place.

if(map[17] && map[68]){ // CTRL+D
    alert('The bookmark window didn\'t pop up!');
    map = {};
    return false;
}

Sans return false, la fenêtre Bookmark s'affiche, au grand dam de l'utilisateur.

La déclaration de retour (nouveau)

D'accord, vous ne voulez donc pas toujours quitter la fonction à ce stade. C'est pourquoi la event.preventDefault()fonction est là. Ce qu'il fait, c'est définir un indicateur interne qui indique à l'interpréteur de ne pas autoriser le navigateur à exécuter son action par défaut. Après cela, l'exécution de la fonction continue (alors qu'elle returnquittera immédiatement la fonction).

Comprenez cette distinction avant de décider d'utiliser return falseou dee.preventDefault()

event.keyCode est obsolète

L'utilisateur SeanVieira a souligné dans les commentaires qu'il event.keyCodeest obsolète.

Là, il a donné une excellente alternative:, event.keyqui renvoie une représentation sous forme de chaîne de la touche enfoncée, comme "a"pour Aou "Shift"pour Shift.

Je suis allé de l'avant et ai concocté un outil pour examiner lesdites cordes.

element.onevent contre element.addEventListener

Les gestionnaires enregistrés avec addEventListenerpeuvent être empilés et sont appelés dans l'ordre d'enregistrement, tandis que la définition .oneventdirecte est plutôt agressive et remplace tout ce que vous aviez auparavant.

document.body.onkeydown = function(ev){
    // do some stuff
    ev.preventDefault(); // cancels default actions
    return false; // cancels this function as well as default actions
}

document.body.addEventListener("keydown", function(ev){
    // do some stuff
    ev.preventDefault() // cancels default actions
    return false; // cancels this function only
});

La .oneventpropriété semble avoir le dessus sur tout et sur le comportement de ev.preventDefault()et return false;peut être plutôt imprévisible.

Dans les deux cas, les gestionnaires enregistrés via addEventlistenersemblent être plus faciles à écrire et à raisonner.

Il existe également attachEvent("onevent", callback)une implémentation non standard d'Internet Explorer, mais cela est au-delà de obsolète et ne concerne même pas JavaScript (il appartient à un langage ésotérique appelé JScript ). Il serait dans votre intérêt d'éviter autant que possible le code polyglotte.

Une classe d'aide

Pour résoudre les problèmes de confusion / plaintes, j'ai écrit une "classe" qui fait cette abstraction ( lien pastebin ):

function Input(el){
    var parent = el,
        map = {},
        intervals = {};
    
    function ev_kdown(ev)
    {
        map[ev.key] = true;
        ev.preventDefault();
        return;
    }
    
    function ev_kup(ev)
    {
        map[ev.key] = false;
        ev.preventDefault();
        return;
    }
    
    function key_down(key)
    {
        return map[key];
    }

    function keys_down_array(array)
    {
        for(var i = 0; i < array.length; i++)
            if(!key_down(array[i]))
                return false;

        return true;
    }
    
    function keys_down_arguments()
    {
        return keys_down_array(Array.from(arguments));
    }
    
    function clear()
    {
        map = {};
    }
    
    function watch_loop(keylist, callback)
    {
        return function(){
            if(keys_down_array(keylist))
                callback();
        }
    }

    function watch(name, callback)
    {
        var keylist = Array.from(arguments).splice(2);

        intervals[name] = setInterval(watch_loop(keylist, callback), 1000/24);
    }

    function unwatch(name)
    {
        clearInterval(intervals[name]);
        delete intervals[name];
    }

    function detach()
    {
        parent.removeEventListener("keydown", ev_kdown);
        parent.removeEventListener("keyup", ev_kup);
    }
    
    function attach()
    {
        parent.addEventListener("keydown", ev_kdown);
        parent.addEventListener("keyup", ev_kup);
    }
    
    function Input()
    {
        attach();

        return {
            key_down: key_down,
            keys_down: keys_down_arguments,
            watch: watch,
            unwatch: unwatch,
            clear: clear,
            detach: detach
        };
    }
    
    return Input();
}

Cette classe ne fait pas tout et ne gérera pas tous les cas d'utilisation imaginables. Je ne suis pas un bibliothécaire. Mais pour une utilisation interactive générale, cela devrait aller.

Pour utiliser cette classe, créez une instance et pointez-la vers l'élément auquel vous souhaitez associer l'entrée au clavier:

var input_txt = Input(document.getElementById("txt"));

input_txt.watch("print_5", function(){
    txt.value += "FIVE ";
}, "Control", "5");

Ce que cela va faire, c'est attacher un nouvel écouteur d'entrée à l'élément avec #txt(supposons que c'est une zone de texte), et définir un point de surveillance pour la combinaison de touches Ctrl+5. Lorsque les deux Ctrlet 5sont en panne, la fonction de rappel que vous avez passée (dans ce cas, une fonction qui ajoute "FIVE "à la zone de texte) sera appelée. Le rappel est associé au nom print_5, donc pour le supprimer, il vous suffit d'utiliser:

input_txt.unwatch("print_5");

Pour se détacher input_txtde l' txtélément:

input_txt.detach();

De cette façon, le garbage collection peut récupérer l'objet ( input_txt), s'il est jeté, et vous n'aurez plus un ancien écouteur d'événement zombie.

Pour plus de précision, voici une référence rapide à l'API de la classe, présentée dans le style C / Java afin que vous sachiez ce qu'ils retournent et quels arguments ils attendent.

Boolean  key_down (String key);

Renvoie trueif keyest down, false sinon.

Boolean  keys_down (String key1, String key2, ...);

Renvoie truesi toutes les touches key1 .. keyNsont en bas, false dans le cas contraire.

void     watch (String name, Function callback, String key1, String key2, ...);

Crée un "point de surveillance" tel que le fait d'appuyer sur tout keyNdéclenchera le rappel

void     unwatch (String name);

Supprime ledit point de surveillance via son nom

void     clear (void);

Efface le cache «clés vers le bas». Équivalent à map = {}ci-dessus

void     detach (void);

Détache les écouteurs ev_kdownet ev_kupde l'élément parent, ce qui permet de se débarrasser de l'instance en toute sécurité

Mise à jour 02/12/2017 En réponse à une demande de publication sur github, j'ai créé un résumé .

Mise à jour 2018-07-21 Je joue avec la programmation de style déclaratif depuis un certain temps, et c'est maintenant mon préféré: violon , pastebin

Généralement, cela fonctionnera avec les cas que vous voudriez de manière réaliste (ctrl, alt, shift), mais si vous devez appuyer, disons, a+wen même temps, il ne serait pas trop difficile de "combiner" les approches en un recherche multi-clé.


J'espère que ce mini-blog de réponse bien expliqué a été utile :)


Je viens de faire une grosse mise à jour de cette réponse! L'exemple du keylogger est plus cohérent, j'ai mis à jour la mise en forme pour que la section "notes" soit plus facile à lire, et j'ai ajouté une nouvelle note sur return falsevspreventDefault()
Braden Best

Qu'en est-il lorsque vous appuyez / maintenez une touche avec le document en focus, puis que vous cliquez sur la zone URL, puis que vous relâchez la clé. keyup n'est jamais déclenché, mais la clé est active, ce qui rend la liste incorrecte. Aussi vice-versa: appuyez / maintenez enfoncée la touche dans la zone URL, le keydown n'est jamais déclenché, puis mettez le focus sur le document et l'état du keydown n'est pas sur la liste. Fondamentalement, chaque fois que le document reprend le focus, vous ne pouvez jamais être sûr de l'état de la clé.
user3015682

3
NB: keyCodeest obsolète - si vous passez à, keyvous obtenez la représentation réelle des caractères de la clé, ce qui peut être agréable.
Sean Vieira

1
@SeanVieira Là encore, vous pouvez également faire des choses étranges en C. Par exemple, saviez-vous que myString[5]c'est la même chose 5[myString]et que cela ne vous donnera même pas d'avertissement de compilation (même avec -Wall -pedantic)? C'est parce que la pointer[offset]notation prend le pointeur, ajoute le décalage, puis déréférence le résultat, faisant myString[5]la même chose que *(myString + 5).
Braden Best du

1
@inorganik parlez-vous de la classe d'aide? Les gists peuvent-ils être utilisés comme des dépôts? Il serait fastidieux de créer un dépôt complet pour un petit bout de code. Bien sûr, je vais faire une idée. Je vais tirer pour ce soir. Midnight Mountain Time -ish
Braden Best

30

Vous devez utiliser l' événement keydown pour garder une trace des touches enfoncées, et vous devez utiliser l' événement keyup pour garder une trace du moment où les touches sont relâchées.

Voir cet exemple: http://jsfiddle.net/vor0nwe/mkHsU/

(Mise à jour: je reproduis le code ici, au cas où jsfiddle.net bails :) Le HTML:

<ul id="log">
    <li>List of keys:</li>
</ul>

... et le Javascript (en utilisant jQuery):

var log = $('#log')[0],
    pressedKeys = [];

$(document.body).keydown(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        pressedKeys[evt.keyCode] = li;
    }
    $(li).text('Down: ' + evt.keyCode);
    $(li).removeClass('key-up');
});

$(document.body).keyup(function (evt) {
    var li = pressedKeys[evt.keyCode];
    if (!li) {
       li = log.appendChild(document.createElement('li'));
    }
    $(li).text('Up: ' + evt.keyCode);
    $(li).addClass('key-up');
});

Dans cet exemple, j'utilise un tableau pour garder une trace des touches qui sont enfoncées. Dans une application réelle, vous souhaiterez peut-être utiliser deletechaque élément une fois la clé associée libérée.

Notez que même si j'ai utilisé jQuery pour me faciliter les choses dans cet exemple, le concept fonctionne tout aussi bien lorsque vous travaillez en Javascript «brut».


Mais comme je pensais qu'il y avait un bug. Si vous maintenez enfoncé un bouton puis passez à un autre onglet (ou la mise au point perdue) tout en maintenant le bouton lorsque vous vous recentrer sur l'écrit, cela montrera que le bouton est enfoncé même si ce n'est pas le cas. : D
XCS

3
@Cristy: alors vous pouvez également ajouter un onblurgestionnaire d'événements, qui supprime toutes les touches enfoncées du tableau. Une fois que vous avez perdu la mise au point, il serait logique de devoir appuyer à nouveau sur toutes les touches. Malheureusement, il n'y a pas d'équivalent JS à GetKeyboardState.
Martijn

1
Avoir un problème avec Coller sur un Mac (Chrome). Il obtient avec succès le keydown 91 (commande), le keydown 86 (v), mais ensuite seulement le 91 keyups, laissant 86 down. Liste des touches: Haut: 91, Bas: 86. Cela ne semble se produire que lorsque vous relâchez la touche de commande en second lieu - si je la lâche d'abord, il enregistre correctement le keyup sur les deux.
James Alday

2
Il semble que lorsque vous appuyez sur trois touches ou plus à la fois, il cesse de détecter d'autres touches jusqu'à ce que vous en souleviez une. (Testé avec Firefox 22)
Qvcool

1
@JamesAlday Même problème. Cela n'affecte apparemment que la touche Meta (OS) sur les Mac. Voir le numéro 3 ici: bitspushedaround.com
Don McCurdy

20
document.onkeydown = keydown; 

function keydown (evt) { 

    if (!evt) evt = event; 

    if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {

        alert("CTRL+ALT+F4"); 

    } else if (evt.shiftKey && evt.keyCode === 9) { 

        alert("Shift+TAB");

    } 

}

1
C'était tout ce que je voulais, meilleure réponse
Randall Coding

7

J'ai utilisé cette façon (j'ai dû vérifier où est enfoncée Shift + Ctrl):

// create some object to save all pressed keys
var keys = {
    shift: false,
    ctrl: false
};

$(document.body).keydown(function(event) {
// save status of the button 'pressed' == 'true'
    if (event.keyCode == 16) {
        keys["shift"] = true;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = true;
    }
    if (keys["shift"] && keys["ctrl"]) {
        $("#convert").trigger("click"); // or do anything else
    }
});

$(document.body).keyup(function(event) {
    // reset status of the button 'released' == 'false'
    if (event.keyCode == 16) {
        keys["shift"] = false;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = false;
    }
});

5

pour qui a besoin d'un exemple de code complet. Droite + Gauche ajoutés

var keyPressed = {};
document.addEventListener('keydown', function(e) {

   keyPressed[e.key + e.location] = true;

    if(keyPressed.Shift1 == true && keyPressed.Control1 == true){
        // Left shift+CONTROL pressed!
        keyPressed = {}; // reset key map
    }
    if(keyPressed.Shift2 == true && keyPressed.Control2 == true){
        // Right shift+CONTROL pressed!
        keyPressed = {};
    }

}, false);

document.addEventListener('keyup', function(e) {
   keyPressed[e.key + e.location] = false;

   keyPressed = {};
}, false);

3

Faites en sorte que la touche enfoncée appelle même plusieurs fonctions, chaque fonction recherchant une touche spécifique et répondant de manière appropriée.

document.keydown = function (key) {

    checkKey("x");
    checkKey("y");
};

2

J'essaierais d'ajouter un keypress Eventgestionnaire keydown. Par exemple:

window.onkeydown = function() {
    // evaluate key and call respective handler
    window.onkeypress = function() {
       // evaluate key and call respective handler
    }
}

window.onkeyup = function() {
    window.onkeypress = void(0) ;
}

Ceci est simplement destiné à illustrer un modèle; Je n'entrerai pas dans les détails ici (surtout pas dans l' Eventenregistrement de niveau2 + spécifique au navigateur ).

Envoyez un message s'il vous plaît si cela aide ou non.


1
Cela ne marcherait pas: ne justifie pas la pression de touche sur un grand nombre de clés keydown et keyUp faire déclencheur. De plus, tous les navigateurs ne déclenchent pas de manière répétée des événements keydown.
Martijn

Quirksmode dit que vous avez tort: quirksmode.org/dom/events/keys.html . Mais je ne soutiendrai pas cela puisque je n'ai pas testé ma proposition.
FK82

Cité à partir de cette page: "Lorsque l'utilisateur appuie sur des touches spéciales telles que les touches fléchées, le navigateur ne doit PAS déclencher d'événements de pression de touche" . En ce qui concerne les répétitions, il répertorie Opera et Konqueror comme ne le faisant pas correctement.
Martijn

2

Si l'une des touches appuyées est Alt / Crtl / Shift, vous pouvez utiliser cette méthode:

document.body.addEventListener('keydown', keysDown(actions) );

function actions() {
   // do stuff here
}

// simultaneous pressing Alt + R
function keysDown (cb) {
  return function (zEvent) {
    if (zEvent.altKey &&  zEvent.code === "KeyR" ) {
      return cb()
    }
  }
}

2
    $(document).ready(function () {
        // using ascii 17 for ctrl, 18 for alt and 83 for "S"
        // ctr+alt+S
        var map = { 17: false, 18: false, 83: false };
        $(document).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[18] && map[83]) {
                    // Write your own code here, what  you want to do
                    map[17] = false;
                    map[18] = false;
                    map[83] = false;
                }
            }
            else {
                // if u press any other key apart from that "map" will reset.
                map[17] = false;
                map[18] = false;
                map[83] = false;
            }
        });

    });

Merci pour votre contribution. Veuillez essayer de ne pas simplement publier le code, ajoutez quelques explications.
Tim Rutter

2

Ce n'est pas une méthode universelle, mais elle est utile dans certains cas. C'est utile pour les combinaisons comme CTRL+ somethingou Shift+ somethingou CTRL+ Shift+ something, etc.

Exemple: lorsque vous souhaitez imprimer une page en utilisant CTRL+ P, la première touche enfoncée est toujours CTRLsuivie de P. Idem avec CTRL+ S, CTRL+ Uet d'autres combinaisons.

document.addEventListener('keydown',function(e){
      
    //SHIFT + something
    if(e.shiftKey){
        switch(e.code){

            case 'KeyS':
                console.log('Shift + S');
                break;

        }
    }

    //CTRL + SHIFT + something
    if(e.ctrlKey && e.shiftKey){
        switch(e.code){

            case 'KeyS':
                console.log('CTRL + Shift + S');
                break;

        }
    }

});


1
case 65: //A
jp = 1;
setTimeout("jp = 0;", 100);

if(pj > 0) {
ABFunction();
pj = 0;
}
break;

case 66: //B
pj = 1;
setTimeout("pj = 0;", 100);

if(jp > 0) {
ABFunction();
jp = 0;
}
break;

Pas la meilleure façon, je sais.


-1
Easiest, and most Effective Method

//check key press
    function loop(){
        //>>key<< can be any string representing a letter eg: "a", "b", "ctrl",
        if(map[*key*]==true){
         //do something
        }
        //multiple keys
        if(map["x"]==true&&map["ctrl"]==true){
         console.log("x, and ctrl are being held down together")
        }
    }

//>>>variable which will hold all key information<<
    var map={}

//Key Event Listeners
    window.addEventListener("keydown", btnd, true);
    window.addEventListener("keyup", btnu, true);

    //Handle button down
      function btnd(e) {
      map[e.key] = true;
      }

    //Handle Button up
      function btnu(e) {
      map[e.key] = false;
      }

//>>>If you want to see the state of every Key on the Keybaord<<<
    setInterval(() => {
                for (var x in map) {
                    log += "|" + x + "=" + map[x];
                }
                console.log(log);
                log = "";
            }, 300);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.