特定按键的键下+键上事件

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

我知道如果我把if条件从keyup中完全删除，那么它就会按照我说的那样运行--但是我希望以后能够对特定的键使用keyup做不同的事情。例如，当只释放'b'键时，也许它将在屏幕上显示一些东西，如 "你刚刚释放了b键！" 我怎样才能跟踪特定键的keydown和keyup事件，并使每个键发生不同的事情？我知道这也不是很有条理（我对这些东西很陌生），所以如果有完全不同的更好的方法......。

Answer 1

在JavaScript中处理键盘

1. 行动职能清单

创建一个对象文字列表，其中包含您所需的 职能. 比如说你有一个你想移动的角色，这里有一些例子。行动:

const Action = {
  powerOn()  { console.log("Accelerating..."); },
  powerOff() { console.log("Decelerating..."); },
  brakeOn()  { console.log("Break activated"); },
  brakeOff() { console.log("Break released");  },
  exit()     { console.log("Nice drive!");     },
  // clutch, colors, lights, fire... Add more, go wild!
};

PS：在真实的情况下，每个函数都会包含处理该字符的实际逻辑，是一次性的。"按N-px移动"或作为代理来填充一个队列，该队列将被帧率引擎（如）消耗。窗口.requestAnimationFrame. 你还可以创建功能来改变颜色等。你明白了大致的意思。

2. 通过Event.type将键与Action关联起来

将KeyboardEvent.key与所需的Event.type（←必须是小写）的所需Action关联。

const keyAction = {
  w:      { keydown: Action.powerOn,  keyup: Action.powerOff },
  s:      { keydown: Action.brakeOn,  keyup: Action.brakeOff },
  Escape: { keydown: Action.exit }
};

请注意，键名 "w" "s" "Escape" 的返回值来表示。首选 KeyboardEvent.key，而不是数字 KeyboardEvent.keyCode. 我们是人，不是机器人。

3. 键盘事件处理程序

最后，我们来听听 "keyup" "keydown" 事件并触发回调函数 keyHandler最终会触发我们特定的Action功能，比如说，即： keyAction["w"]["keydown"]() 这实际上是我们飞船的 powerOn 动作功能!

const keyHandler = (ev) => {
  if (ev.repeat) return; // Key-held, prevent repeated Actions (Does not work in IE11-)
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return; // No such Action
  keyAction[ev.key][ev.type]();  // Trigger an Action
};

['keydown', 'keyup'].forEach((evType) => {
    document.body.addEventListener(evType, keyHandler);
});

结果。

const Action = {
  powerOn()  { console.log("Accelerating..."); },
  powerOff() { console.log("Decelerating..."); },
  brakeOn()  { console.log("Break activated"); },
  brakeOff() { console.log("Break released");  },
  exit()     { console.log("Nice drive!");     },
};

const keyAction = {
  w: { keydown: Action.powerOn,  keyup: Action.powerOff },
  s: { keydown: Action.brakeOn,  keyup: Action.brakeOff },
  Escape: { keydown: Action.exit }
};

const keyHandler = (ev) => {
  if (ev.repeat) return;                             
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
  keyAction[ev.key][ev.type]();
};

['keydown', 'keyup'].forEach((evType) => {
  document.body.addEventListener(evType, keyHandler);
});

Click here to fucus this window.<br>
Than, use [<kbd>W</kbd>], [<kbd>S</kbd>] or [<kbd>Esc</kbd>] keys on your keyboard.

---

为你的特定请求举例。

const changeBG = (color) => document.body.style.background = color;

const Action = {
  red()    { changeBG("#f00"); },
  yellow() { changeBG("yellow"); },
  orange() { changeBG("orange"); },
  reset()  { changeBG(""); },
};

const keyAction = {
  r: { keydown: Action.red,    keyup: Action.reset },
  y: { keydown: Action.yellow, keyup: Action.reset },
  o: { keydown: Action.orange }, // No keyup for this one :)
};

const keyHandler = (ev) => {
  if (ev.repeat) return;  
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
  keyAction[ev.key][ev.type]();
};

['keydown', 'keyup'].forEach((evType) => {
  document.body.addEventListener(evType, keyHandler);
});

body { transition: background: 0.3s; }

Click here to fucus this window. <br>Keys:<br>
[<kbd>Y</kbd>] for Yellow<br>
[<kbd>R</kbd>] for Red<br>
[<kbd>O</kbd>] to permanently set to Orange

Answer 2

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

现在只需将css规则与你的css类相匹配即可。