Comment puis-je détecter les pressions simultanées sur des touches en JavaScript ?

Détection simultanée de plusieurs touches enfoncées en JavaScript

En JavaScript, déterminer si plusieurs touches sont enfoncées simultanément peut être réalisé en suivant les étapes suivantes :

1. Créez un tableau JavaScript appelé "carte" ou objet.

2. Dans les écouteurs d'événements keydown et keyup, manipulez le tableau "map":

   • Lorsqu'une touche est enfoncée (événement keydown), définissez le code de touche correspondant ou entrez la valeur "true" dans le tableau.
   • Lorsqu'une clé est relâchée (événement keyup), définissez le code de clé ou la clé correspondante dans le tableau sur "false."
3. Utilisez le tableau "map" pour vérifier des combinaisons de touches spécifiques en évaluant son valeurs.

Exemple

// Create an array to track key presses
var map = {};

// Add event listeners for keydown and keyup events
document.addEventListener("keydown", function(e) {
  map[e.keyCode] = true;
});
document.addEventListener("keyup", function(e) {
  map[e.keyCode] = false;
});

// Check for key combinations using the map array
if (map[17] && map[16] && map[65]) {
  console.log("Ctrl + Shift + A pressed");
}

Utilisation

• Ce script initialise un tableau de cartes pour pressions sur la touche du moniteur.
• Lorsque l'utilisateur appuie sur la touche "A", le L'élément "map[65]" est défini sur "true" (17 pour Ctrl, 16 pour Shift, 65 pour A) : map = { 17 : true, 16 : true, 65 : true }.
• If l'utilisateur appuie sur plusieurs touches, les éléments correspondants dans le tableau seront définis en conséquence.
• Pour détecter des combinaisons de touches spécifiques, reportez-vous à la condition "if" dans le script, qui vérifie la combinaison "Ctrl Shift A".

Remarques importantes

• Dépréciation de keyCode : Event.keyCode est désormais obsolète. Des approches alternatives, telles que event.key, doivent être utilisées à la place.
• Considérations sur la gestion des événements : soyez conscient du mécanisme de gestion des événements utilisé (par exemple, element.onkeydown contre element.addEventListener), car ils offrent différentes comportements.
• Paramètres par défaut du navigateur : certaines combinaisons de touches peuvent avoir des actions de navigateur par défaut. Pensez à utiliser event.preventDefault() ou return false pour empêcher ces actions.
• Soyez prudent lorsque vous quittez les gestionnaires d'événements avec return ou e.preventDefault(), car ils ont des effets différents sur la gestion des événements et l'exécution du code.
• Pour des fonctionnalités plus complètes, vous pouvez créer une classe d'assistance ou utiliser une programmation de style déclaratif pour une approche plus propre et plus gérable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!