KEYDOWN + KEYUP事件特定键(keydown + keyup events for sp

我试图使背景颜色变化时，某些键按住。例如，当“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'});
        }
    });

});

我遇到的问题是，KEYUP不是为每个单独的按键专门的工作。

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

我知道如果我删除了，如果从KEYUP条件语句完全然后它会表现我怎么说，我把它想 - 但我希望能够做不同的事情以后使用KEYUP与特定按键。例如，如果只是“B”键被释放，也许它会说在屏幕上像“你刚刚发布的B键！” 我如何能保持特定键轨道的keydown和KeyUp事件，并做出不同的事情发生的每一个？我知道这是不是非常有组织或者（我是很新，这东西），所以如果有这样的一个完全不同的，更好的办法？

Answer 1:

现场演示

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

});

一个面向对象的例子是创建的用于所期望的按键操作的列表：
现场演示

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

DEMO与NOT位运算符

一种更先进的方式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

Answer 2:



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

现在只要配合您的CSS类的CSS规则

文章来源: keydown + keyup events for specific keys