特定键的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中删除if条件,那么它将表现我说我想要它的方式 - 但我希望以后能够使用具有特定键的keyup做不同的事情.例如,当只释放'b'键时,它可能会在屏幕上显示"你刚刚发布了b键!".如何跟踪特定键的keydown和keyup事件,并为每个键发生不同的事情？我知道这也不是很有组织(我对这些东西很新)所以如果有一个完全不同的更好的方法来做这个...

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

});

一个面向对象的例子是创建的用于所期望的按键操作的列表:
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 
      }

    });

});

而不是三元运算符(？:)我用过:

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

您还可以使用NOT按位运算符,如:

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

无论如何,你只需要知道哪些事件发生(从指定"的keydown" /"KEYUP"),并得到想要的排列位置[0],[1]你需要的属性值,例如:["red"],["white"] _{(其中"红" == 0且"白色"== 1)}

使用NOT按位运算符进行演示

以上更多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类而不是:

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