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

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

面向对象示例是为所需的KEY创建操作列表：
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"] _{（其中“red”== 0和“white”== 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类而不是：

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事件

2 个答案: