特定键的keydown + keyup事件

我正试图在按下某些键时使背景颜色发生变化。 例如，当按住’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

现场演示

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创建一个动作列表：
现场演示

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

使用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 eg: {"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类匹配即可