keydown + eventi keyup per chiavi specifiche

Question

Sto cercando di fare in modo che il colore dello sfondo cambi quando alcuni tasti vengono premuti. Ad esempio, quando si tiene premuto il tasto 'r', lo sfondo dovrebbe essere rosso. Quando il tasto 'r' non viene più premuto, lo sfondo dovrebbe essere impostato su bianco.

$(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'}); 
     } 
    }); 

}); 

Il problema che sto avendo è che la chiave non funziona in modo specifico per ogni singola chiave.

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

lo so se mi tolgo la se condizionali da keyup del tutto allora si comporteranno come ho detto volevo che - ma voglio essere in grado di fare cose diverse in seguito utilizzando keyup con tasti specifici. Ad esempio, quando viene rilasciato solo il tasto 'b', forse dirà qualcosa sullo schermo come "Hai appena rilasciato il tasto b!" Come posso tenere traccia degli eventi keydown e keyup per chiavi specifiche e far accadere cose diverse per ciascuna? So che questo non è molto organizzato sia (sono abbastanza nuovo a questo roba), quindi se c'è un modo completamente diverso e migliore di fare questo ...

Answer 1

LIVE DEMO

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 object oriented esempio potrebbe essere quello di creare un elenco di azioni per un tasto desiderato:
LIVE DEMO

$(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 
     } 

    }); 

}); 

dove al posto del ternario Operator (:)ho usato:?

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

è anche possibile utilizzare l'operatore NOT bit a bit come:

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

in qualsiasi modo hai solo bisogno di sapere quale evento è occ urring (dal "keydown"/"keyup" designato) e ottenere la posizione dell'array desiderato [0], [1] del valore della proprietà necessario, e.g: ["red"], ["white"] _{(dove == "red" 0 e == "bianco" 1)}

DEMO with NOT bitwise operator

---

Un altro advanced way DEMO di quanto sopra sarebbe di aggiungere il tuo elenco anche

• elementi a target,
• un metodo jQuery da usare,
• proprietà di tale metodo per applicare

che si tradurrebbe in:

$(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); 

    }); 

}); 

È anche possibile tenere premuto il B tasto e premere il H chiave per fare azioni simultanee.

Se avete domande (penso che vorreste) sentitevi liberi di chiedere.

EDIT

Se si desidera controllare le classi CSS di fare come:

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

Answer 2

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

Ora basta abbinare le regole CSS con le vostre classi CSS