特定のキーのkeydown + keyupイベント

Question

特定のキーが押されているときに背景色を変更しようとしています。たとえば、「r」キーを押したままにすると、背景が赤くなります。 'r'キーがもう押されていないとき、背景はデフォルトで白になるはずです。

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

}); 

私が抱えている問題は、個々のキーごとにキーアップが特別に機能していないことです。

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

からkeyupから条件文は完全にそれは私が、私はそれを望んでいたと述べたどのように動作するかどうか、私は削除した場合、私は知っている - しかし、私は、特定のキーを使用してからkeyup使用して、後で別のことを行うことができるようにしたいです。たとえば、「b」キーが離されたときに、「あなたはちょうどbキーをリリースしました！特定のキーのキーダウンイベントとキーアップイベントを追跡し、それぞれ異なるイベントを発生させるにはどうすればよいですか？私はこれを行うための完全に異なる、より良い方法があるかどう...（私はこのようなものにはかなり新しいです）ので、これは非常にいずれかの組織化されていません知っている

FYI

Answer 1

LIVE DEMO

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}); 
     } 
    }); 

}); 

オブジェクト指向例では、所望のキーのアクションのリストを作成するであろう。
？

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

をあなたも同様にビット単位NOT演算子を使用することができます：

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

代わり 三項演算子（:)の私が使用し 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 
     } 

    }); 

}); 

どのようなイベントが発生しているかを知る必要がある（指定された "keydown"/"keyup"から）を呼び出し、必要なプロパティ値の希望の配列位置[0]、[1]を取得します。e。G：["red"]、["white"]_{（ここで、 "赤" == 0と "白" == 1）}

DEMO with NOT bitwise operator

---

より上のadvanced way DEMOをに追加するであろうあなたのリストも

• 対象から、
• 使用するjQueryの方法、
• につながることになる

を適用するには、そのメソッドのプロパティ：

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

    }); 

}); 

あなたも、あなたのBキーを押しながらを押すことができます同時操作を行うにはHキーを押します。

ご質問がありましたら、お気軽にお尋ねください。あなたはCSSクラスを制御したい場合は

EDIT

は次のように行うよりも：

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) 
    } 
    }) 
}) 

今ちょうどあなたのCSSクラス