如何跟踪JavaScript中的一系列按键？

Question

我对JavaScript非常陌生，不知道我要去哪里。 我想做一个在一系列正确的keyEvent之后执行的函数。 本质上，当用户按此顺序（仅此顺序）按“ j”，“ a”，“ c”，“ o”和“ b”键时，我网页上的元素将变为可见。 该元素当前使用CSS样式标签隐藏： <div id="hideaway" style="display:none;">

 <script> function keyListener(event) { event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed if(key==106) { //this is for 'j' document.getElementById("hideaway").style.display="block"; event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed if(key==97) { //this is for 'a' event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed if(key==99) { //this is for 'c' event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed if(key==111) { //this is for 'o' event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed if(key==98) { //this is for 'b' event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed document.getElementById('hideaway').style.display='block'; } } } } } } document.getElementById("hideaway").addEventListener("keydown", keyListener); </script>

所有评论表示赞赏。

Answer 1

我实现了这样的Konami代码复活节彩蛋：

var code = "";
window.addEventListener("keydown",function(e) {
    code = (code+String.fromCharCode(e.keyCode || e.which)).substr(-11);
    if( code == "&&((%'%'BA ") {
        window.removeEventListener("keydown",arguments.callee);
        // do stuff here
    }
},false);

这里重要的事情是：

.substr(-11)将输入序列修剪为11个字符-在您的情况下，您需要-5 ，即“ jacob”的长度
字母是大写的。 您应该检查JACOB
在上面的code中，箭头键的键控code使用相应的字符。 就您而言，您只需要字母即可，所以不必担心。

Answer 2

一种方法：

http://codepen.io/christianpugliese/pen/GpKJXN

var PASSCODE = ['j','a','c','o','b'],
    current = 0,
    logger = document.getElementById('logger');

function keyListener(e) {
    var code = e.keyCode || e.which,
      str = String.fromCharCode(code);

    if(str === PASSCODE[current]){
        current++;
        logger.innerHTML += str;
        console.log(current, PASSCODE.length);
        if(current >= PASSCODE.length){
          console.log('voi la');
        }
  } else {
      current = 0;
      logger.innerHTML = '';
  }

}

document.addEventListener("keypress", keyListener);

Answer 3

回答为什么它不起作用。

浏览器javascript是事件驱动的。 每次按键开始时都会调用一个keydown侦听器功能。 所以每个代码重复

 event = event || window.event; //capture the event, and ensure we have an event var key = event.key || event.which || event.keyCode; //find the key that was pressed

不是等待新的按键事件，而是多次访问与当前按键关联的值。 要解决此问题，处理程序必须在采取行动之前记住先前事件中已匹配多少个字符的状态。

在隐藏块上注册非捕获事件侦听器不太可能执行：该块既不能成为事件的目标，也不能接收从子元素冒泡的事件。 解决方案是要么全局注册侦听器，要么使用事件捕获（addEventListener的第三个参数）。

下面是一个可行的示例来说明这些观点。 如果不熟悉它们，请阅读对象文字和Function.prototype.bind方法。 该示例还在执行任何操作之前等待页面加载。

<!DOCTYPE html><html><head><title>EasterEgg</title><meta charset="utf-8">
<script>

var easterEgg = 
{ str: "jacob",
  length: 5,
  got: 0,
  blockId: "hideaway",

  test: function(event)
  {  event = event || window.event;
     var c = event.key;
     if(!c) // legacy method
     {  var keyCode = event.keyCode || event.which;
        c = String.fromCharCode(keyCode);
     }
     if( c.toLowerCase() != this.str.charAt(this.got))
        this.got = 0;  // start again
     else
        if(  ++this.got == this.length)
        {   document.getElementById(this.blockId).style.display="block";
            window.removeEventListener("keydown", this.test, false);
        };
     return true;
  },
}
easterEgg.test = easterEgg.test.bind(easterEgg);

window.addEventListener("load", function()
   { window.addEventListener("keydown", easterEgg.test, false);
   }, false);

</script>
</head>
<body><header>Hello</header>
  <div id="hideaway" style="display:none"> SURPRISE! </div>
</body>
</html>

如何跟踪JavaScript中的一系列按键？

问题描述

3 个解决方案

解决方案1
7 已采纳 2015-08-26 20:45:12

解决方案2
1 2015-08-26 21:10:38

解决方案3
1 2015-08-27 00:45:55

如何跟踪JavaScript中的一系列按键？

问题描述

3 个解决方案

解决方案1 7 已采纳 2015-08-26 20:45:12

解决方案2 1 2015-08-26 21:10:38

解决方案3 1 2015-08-27 00:45:55

解决方案1
7 已采纳 2015-08-26 20:45:12

解决方案2
1 2015-08-26 21:10:38

解决方案3
1 2015-08-27 00:45:55