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