Javascript/jQuery Keypress日志记录

Question

我希望能够记录按下特定页面上的按键，试图实现“复活节彩蛋”类型的功能，当正确的按键被按下时按正确的顺序触发和事件。

任何人都可以给我任何指针？

Answer 1

那么，即使已经接受了另一个答案，我仍然会在那里抛出一个答案。

$(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)); 
      } 
     }); 
}); 

当你最终键入“蛋”（在这个例子中），你会得到一个警报，关键的历史将重置。

编辑：更新了代码以截断字符串，如果它太长。

Answer 2

我早些时候使用过这个代码来使用向上/向下箭头滚动列表，应该相对容易地扩展它来检查某个组合键。

$("#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; 
    } 

Answer 3

使用jQuery：

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

这捕获整个页面不只是一个特定的元素上的按键。

This blog post详细信息如何捕获CTRL +快捷键。

Answer 4

我不确定确切的按键代码，我从Hans Kov的答案中借用。我会像堆栈一样使用一个数组，然后将一个新的按键压入堆栈，然后弹出它们以检查正确的顺序。

<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> 

Answer 5

在这种情况下，它也可能是能够检查的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; 
} 

这促进自我记录代码，是更具可读性和可维护性。

Answer 6

这里有一个简单的方法来要求在用户输入字符序列时按住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; 
     } 
    }); 

Answer 7

这也许？

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 = "" 
    } 
})