Javascript/jQuery Keypress logging

Question

Me gustaría poder registrar las pulsaciones de teclas en una página específica, tratando de implementar una funcionalidad de tipo "Huevo de Pascua" donde se presionan las teclas correctas en el orden correcto que desencadena y evento.

¿Alguien me puede dar alguna sugerencia?

Answer 1

Bueno, a pesar de que se ha aceptado otra respuesta, de todos modos voy a lanzar una.

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

Cuando se escribe en última instancia 'huevo' (para este ejemplo), obtendrá una alerta, y la historia se restablecerán.

EDITAR:Se ha actualizado el código para truncar la cadena si es demasiado larga.

Answer 2

He usado este código anteriormente para usar las flechas arriba/abajo para desplazarme por una lista, debería ser relativamente fácil extender esto para verificar una cierta combinación de teclas.

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

Usando jQuery:

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

Esto captura las pulsaciones de teclas en toda la página no sólo un elemento específico.

This blog post detalles sobre cómo capturar teclas de método abreviado CTRL +.

Answer 4

No estoy seguro de los códigos de tecla exactos, tomé prestado de la respuesta de Hans Kov. Yo usaría una matriz como una pila y simplemente presionaré una nueva tecla en la pila, y luego las abriría para verificar el orden correcto.

<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

En tales circunstancias, también podría ser útil para poder comprobar las teclas ctrl/alt/Turno:

if (e.altKey) { 
} 

if (e.ctrlKey) { 
} 

if (e.shiftKey) { 
} 

Para los códigos de pulsación de teclas, el siguiente objeto literal debe ayudar:

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 
} 

Así que en lugar de:

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

Podemos decir:

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

Esto promueve el código de auto documentación, y es más fácil de leer y de mantener.

Answer 6

aquí hay una manera fácil de requerir que la tecla Ctrl se mantenga presionada mientras el usuario ingresa una secuencia de caracteres. un poco más fácil que algunas de las respuestas. en el caso debajo de presionar y mantener presionada la tecla Ctrl mientras se escribe "quack" (sin comillas) activará la alerta. alguien, algún día.

 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

¿Esto tal vez?

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