代码之家  ›  专栏  ›  技术社区  ›  CLiown

javascript/jquery按键记录

  •  6
  • CLiown  · 技术社区  · 14 年前

    我希望能够将按键记录在一个特定的页面上,尝试实现一个“复活节彩蛋”类型的功能,当按正确的顺序按下正确的按键时,它会触发并发生事件。

    有人能给我指点一下吗?

    7 回复  |  直到 14 年前
        1
  •  10
  •   user113716    14 年前

    好吧,即使另一个答案被接受了,我还是要把它扔出去。

    $(document).ready(function() {
    
        var easterEgg = 'egg';
        var eggLength = easterEgg.length;
        var keyHistory = '';
        var match;
            $(document).keypress(function(e) {
                keyHistory += String.fromCharCode(e.which)
                match = keyHistory.match(easterEgg); 
                if(match) {
                    alert(match);
                    keyHistory = match =  '';
                } else if (keyHistory.length > 30) {
                    keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1));
                }
            });
    });
    

    当您最终键入“egg”(本例中)时,您将收到警报,并且键历史记录将重置。

    编辑: 更新代码以在字符串太长时截断字符串。

        2
  •  2
  •   Hooray Im Helping codaddict    14 年前

    我不确定确切的按键密码,我借用了汉斯·科夫的答案。我会使用一个类似堆栈的数组,只需将一个新的按键推到堆栈上,然后弹出它们来检查顺序是否正确。

    <script type="text/javascript>
    
    var keypresses = [];
      $(document).ready(function() {
        body.bind('keypress', function(event) {
          switch(event.keyCode) {
            case 40:
              keypresses.push('down');
            break;
            case 38:
              keypresses.push('up');
          }
    
          checkForEasterEgg(keypresses);
        });
      });
    
      function checkForEasterEgg(keyArray) {
        var length = keyArray.length;
        for(var i = 0; i < length; i++) {
          // using keyArray.pop(), check if order matches up up down down left right left right b a
          if (easterEggPassed) {
            console.log('30 lives, woohoo!');
          }
        }
      }
    </script>
    
        3
  •  2
  •   Mutation Person    14 年前

    在这种情况下,还可以检查ctl/alt/shift键:

    if (e.altKey) {
    }
    
    if (e.ctrlKey) {
    }
    
    if (e.shiftKey) {
    }
    

    对于按键代码,以下对象文字应该有帮助:

    var Key =
    {
        BACKSPACE: 8,
        TAB: 9,
        ENTER: 13,
        ESC: 27,
        PAGEUP: 33,
        PAGEDOWN: 34,
        END: 35,
        HOME: 36,
        LEFT: 37,
        UP: 38,
        RIGHT: 39,
        DOWN: 40,
        HELP: 47,
        H: 72,
        K: 75,
        N: 78,
        R: 82,
        NUMERIC_PLUS: 107,
        F1: 112,
        F2: 113,
        F3: 114,
        F4: 115,
        F5: 116,
        F6: 117,
        F7: 118,
        F8: 119,
        F9: 120,
        F10: 121,
        F11: 122,
        F12: 123,
        PLUS: 187,
        MINUS: 189,
        V: 86
    }
    

    所以不是:

      switch(event.keyCode) { 
        case 40: 
          keypresses.push('down'); 
        break; 
        case 38: 
          keypresses.push('up'); 
      } 
    

    我们可以说:

    switch(event.keyCode) { 
        case Key.DOWN: 
            keypresses.push('down'); 
            break; 
        case Key.UP: 
            keypresses.push('up'); 
            break; 
    } 
    

    这促进了自文档化代码,并且更易于阅读和维护。

        4
  •  0
  •   Hans Skov    14 年前

    我之前用过这段代码来使用上/下箭头在列表中滚动,它应该相对容易扩展来检查某个键组合。

    $("#SearchInput").keydown(function(e){
      switch(e.which) { 
         // User pressed "up" arrow
         case 38:
            navigate('up');
         break;
         // User pressed "down" arrow
         case 40:
            navigate('down');
         break;
         // User pressed "enter"
         case 13:
            if(currentUrl != '') {
               window.location = currentUrl;
            }
         break;
      }
    
        5
  •  0
  •   Greg K    14 年前

    使用 jQuery :

    $(document).keyup( function(e) {
        if (e.keyCode == 27) {
            alert("You pressed escape");
        }
    });
    

    这将捕获整个页面上的按键,而不仅仅是一个特定元素。

    This blog post 详细说明如何捕获ctrl+快捷键。

        6
  •  0
  •   Brent Fleckner    11 年前

    这是一种简单的方法,要求在用户输入字符序列时按住ctrl键。比一些回答简单一点。在下面的情况下,在键入“嘎克”(无引号)时按住ctrl键将触发警报。有人,总有一天。

         var easterEgg = [81, 85, 65, 67, 75]; //quack
         var eggLength = easterEgg.length;
         var currentPosition = 0;
         $(document).keydown(function (e) {
             if (e.ctrlKey && e.keyCode == easterEgg[currentPosition]) {
                 e.preventDefault();
                 if (++currentPosition == eggLength) {
                     currentPosition = 0;
                     alert('oh yeah, right there');
                 }
             } else {
                 currentPosition = 0;
             }
         });
    
        7
  •  0
  •   void main    11 年前

    这可能?

    var seq = "rainbow"
    var input = ""
    window.addEventListener("keypress", function(e) {
        input += String.fromCharCode(e.keyCode)
    
        for (var i = 0; i < seq.length; i++) {
            if (input[i] != seq[i] && input[i] != undefined) {
                input = ""
            }
        }
    
        if (input == seq) {
            alert("EASTER EGG!")
    
            input = ""
        }
    })