keydown + keyup événements de touches spécifiques à l'

Je suis en train de rendre l'arrière-plan de changement de couleur lorsque certaines touches sont maintenues enfoncées. Par exemple, lorsque le " r " touche est enfoncée, le fond doit être rouge. Lorsque le " r " à la touche n'est pas pressée de plus, l'arrière-plan par défaut, blanc.

$(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, je vais avoir, c'est que keyup n'est pas de travail spécifiquement pour chaque touche.

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

Je sais que si je supprime le si les conditions de keyup complètement puis il va se comporter de la façon dont je l'ai dit, je voulais que ça — mais je veux être capable de faire des choses différentes, plus tard, sur l'utilisation de keyup avec des touches spécifiques. Par exemple, alors que le "b", la touche est relâchée, peut-être qu'il va dire quelque chose sur l'écran comme "Tu viens de sortir la clé b!" Comment puis-je suivre les évènements keydown et keyup pour les touches spécifiques et de faire des choses différentes pour chacun? Je sais que ce n'est pas très organisé (je suis assez nouveau à ce genre de choses) donc si il y a un complètement différent et la meilleure manière de faire ceci...

avez-vous essayé d'utiliser e.which au lieu de e.keyCode? stackoverflow.com/a/302161/2111457

OriginalL'auteur | 2013-05-02

DÉMONSTRATION EN DIRECT

FYI 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 orientée objet exemple serait de créer une liste d'actions pour une TOUCHE souhaitée:
DÉMONSTRATION EN DIRECT

$(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 e.g: {background:"red"}
         $(this).css(propObj);             //Finally create /use 
      }

    });

});

où, au lieu de la Opérateur Ternaire (?:) J'ai utilisé:

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

vous pouvez également utiliser le PAS de l'opérateur bit à bit comme:

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

toute façon, vous avez juste besoin de connaître l'événement qui est survenu (provenant de l'organisme "keydown" /"keyup") et d'obtenir le tableau désiré position [0],[1] de la valeur de la propriété dont vous avez besoin, de l'e.g: ["red"],["white"] _{(où "rouge" == 0 et "blanc" == 1)}

La DÉMO avec le PAS de l'opérateur bit à bit

Un plus une méthode avancée de DÉMONSTRATION seraient à ajouter à votre liste également

éléments à la cible,
une méthode jQuery pour utiliser,
les propriétés de cette méthode à appliquer

qui aurait pour résultat:

$(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 e.g: {"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 maintenez votre B enfoncée et appuyez sur la touche H pour faire des actions simultanées.

Si vous avez des questions (je pense que vous) n'hésitez pas à demander.

MODIFIER

Si vous souhaitez contrôler les classes CSS de faire comme:

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

disons que je voulais montrer un objet caché lorsque la touche b est libéré, et prendre un autre objet se déplacer lorsqu'une autre touche est relâchée - comment cela fonctionne? Je veux être capable de faire des choses différentes pour le keyup et keydown de clés individuelles, pas juste changer les couleurs.
merci! Je suppose que ce que je veux vraiment, c'est la capacité à utiliser les différentes fonctions au sein de la keydown et keyups pour les touches spécifiques
Je suis partant pour le travail en quelques minutes — je vais certainement revenez ici quand je rentre à la maison et de regarder votre plus récent exemple merci encore
ajout de l'exemple avancé. N'hésitez pas à demander si vous avez des Q
+1, c'est une belle réponse!

OriginalL'auteur Roko C. Buljan

-1



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

Maintenant simplement de respecter les règles css avec vos classes css

OriginalL'auteur ilan berci

Vous devez vous connecter pour publier un commentaire.