keydown + keyup events for specific keys



我正试图在按住某些键时更改背景颜色。例如,当按住"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中完全删除if条件词,那么它将按照我所说的那样运行——但我希望以后能够使用特定键的keyup来做不同的事情。例如,当只释放了"b"键时,它可能会在屏幕上说"你刚刚释放了b键!"我如何跟踪特定键的keydown和keyup事件,并使每个键发生不同的事情?我知道这也不是很有条理(我对这件事很陌生(,所以如果有一种完全不同的更好的方法。。。

用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">,或者充当一个代理来填充一个队列,该队列比Window.requestAnimationFrame等帧速率引擎消耗的队列要多。您还可以创建更改颜色的函数等。您已经大致了解了。

2.按事件类型将键与操作关联

将KeyboardEvent.key与所需事件的所需操作关联。type(←必须小写(:

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.KeyboardEvent处理程序

最后,让我们听听"keyup" "keydown"事件,并触发一个回调函数keyHandler,它最终将触发我们的特定Action函数,比如:keyAction["w"]["keydown"](),它实际上是我们飞船的powerOn Action函数!

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 focus this window.<br>
Then, 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 focus 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


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

现在只需将css规则与您的css类进行匹配

相关内容

  • 没有找到相关文章

最新更新