jQuery Girl
  1. jQuery Girl
  3. événements keydown + keyup pour des clés spécifiques
Intereting Posts
Positionner Fancybox 2 manuellement DataTables Plusieurs tables de plusieurs tableaux JSON imprimer html via javascript / jquery Problème de navigation croisée avec la fonction offset () jquery La sérialisation de textarea avec wrap = “hard” ne donne pas de sauts de ligne Augmenter les valeurs css avec jquery Ajout de validation avec MVC 3 et jQuery Validator au moment de l’exécution Erreur Cordova JQuery VS2015: Exception: impossible d’appeler la méthode ‘concat’ d’undefined jQuery and Hiding: after /: before pseudo classes ajax à chaque fois ou tout charger à la fois jQuery UI: lors du repository, attachez la div à sa cible largable Comment appeler une fonction jQuery en charge avec un certain retard? La mise au point sur un bouton ne fonctionne pas Bootstrap collapse, rappel après la fin du développement Obtenir la valeur href dans une galerie profondément nestede

événements keydown + keyup pour des clés spécifiques

J’essaie de faire changer la couleur de fond lorsque certaines touches sont maintenues enfoncées. Par exemple, lorsque la touche «r» est maintenue enfoncée, l’arrière-plan doit être rouge. Lorsque vous n’appuyez plus sur la touche ‘r’, l’arrière-plan devrait être blanc par défaut. 

$(document).ready(function () { $('body').keydown(function(e){ if(e.keyCode == 114){ $(this).css({'background':'red'}); } if(e.keyCode == 121){ $(this).css({'background':'yellow'}); } }); $('body').keypress(function(e){ if(e.keyCode == 114){ $(this).css({'background':'red'}); } if(e.keyCode == 121){ $(this).css({'background':'yellow'}); } }); $('body').keyup(function(e){ if(e.keyCode == 114){ $(this).css({'background':'white'}); } if(e.keyCode == 121){ $(this).css({'background':'white'}); } }); });

Le problème que je rencontre est que keyup ne fonctionne pas spécifiquement pour chaque clé individuelle. 

  $('body').keyup(function(e){ $(this).css({'background':'white'}); });

Je sais que si je supprime complètement les conditionnels if de keyup, il se comportera comme je le voulais. Mais je veux pouvoir faire différentes choses plus tard en utilisant keyup avec des clés spécifiques. Par exemple, lorsque vous n’appuyez que sur la touche “b”, le message “Vous venez de relâcher la touche b!” Comment puis-je suivre les événements Keydown et Keyup pour des clés spécifiques et faire en sorte que différentes choses se produisent pour chacune? Je sais que ce n’est pas très organisé non plus (je suis assez novice dans ce domaine), donc s’il existe un moyen complètement différent et meilleur de le faire …

DEMO LIVE

Pour info R = 82 

 $(document).ready(function () { $('body').on('keydown keyup',function(e){ var color = e.type=="keydown" ? 'red' : 'white' ; if(e.which==82){ $(this).css({background: color}); } }); });

Un exemple orienté object serait de créer une liste d’actions pour une clé souhaitée:
DEMO LIVE 

 $(document).ready(function () { $('body').on('keydown keyup', function( e ) { var key = e.which; var io = e.type=="keydown" ? 0 : 1; // "0"if keydown; "1" if keyup var keyAction = { // Object to store our stuff // keyCode : [(0)KEYDOWN, (1)KEYUP] 82 : ['red' ,'white'], // R key 66 : ['blue','white'] // B key (last one without comma!) }; var propObj = {}; // Object to store property + value for jQuery methods var keyArr = keyAction[key]; if(typeof keyArr != 'undefined') { // Test keyArr (82, 66) is returned/populated to prevent errors propObj.background = keyAction[key][io]; // Created the jQ Method's object eg: {background:"red"} $(this).css(propObj); // Finally create / use } }); });

où au lieu de l’ opérateur ternaire (? 🙂 j’ai utilisé: 

 var io = e.type=="keydown" ? 0 : 1;

vous pouvez aussi utiliser l’opérateur NOT au niveau du bit comme: 

 var io = ~~(e.type=="keyup"); // evaluating false|true == 0|1

de toute façon, vous avez juste besoin de savoir quel événement se produit (à partir du “keydown” / “keyup” désigné) et d’obtenir la position de tableau souhaitée [0] , [1] de la valeur de propriété dont vous avez besoin, par exemple: ["red"] , ["white"] (où “rouge” == 0 et “blanc” == 1)

DEMO avec l’opérateur PAS au niveau du bit

Une façon plus avancée de la DEMO de ce qui précède serait d’append à votre liste également

  • éléments à cibler,
  • une méthode jQuery à utiliser,
  • les propriétés pour que cette méthode s’applique

ce qui entraînerait: 

 $(document).ready(function () { $('body').on('keydown keyup', function(e) { var keyAction = { 82 : ['body', 'css', "background", ['red','white'] ], // R key 66 : ['body', 'css', "background", ['blue','white'] ], // B key 72 : ['h1', 'animate', "top", [100,30] ] // H key }, key = e.which, // Get the keyCode keyArr = keyAction[key], // get our array from our list io = e.type=="keydown" ? 0 : 1, // io will be 0 || 1 depending if key is down or up element, method, property={}; // the Method Properties Object will look like eg: {"background":"red"} if(typeof keyArr != "undefined"){ element = keyArr[0], method = keyArr[1], property[keyArr[2]] = keyArr[3][io]; $(element)[method](property); // do stuff } console.log( key, io, element, method, property); }); });

Vous pouvez même maintenir la touche B enfoncée et appuyer sur la touche H pour effectuer des actions simultanées.

Si vous avez des questions (je pense que vous le voudriez), n’hésitez pas à les poser.

MODIFIER

Si vous souhaitez contrôler les classes CSS, procédez comme suit:

http://jsbin.com/awolab/22/edit 

 $().ready(function() { $('body').on("keyup keydown", function() { if(e.keyCode == 114 || e.keyCode = 121) { $(this).toggleClass("key" + e.keyCode) } }) })

Maintenant, associez simplement les règles css à vos classes css