Javascript/jQuery Nhấn phím ghi

Question

Tôi muốn đăng nhập các phím bấm trên một trang cụ thể, cố gắng thực hiện chức năng kiểu 'trứng Phục sinh' khi nhấn đúng các phím đúng thứ tự và kích hoạt sự kiện.

Có ai có thể cho tôi bất kỳ con trỏ nào không?

Answer 1

Vâng, mặc dù một câu trả lời khác đã được chấp nhận, tôi sẽ ném một trong số đó.

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

Khi bạn nhập 'trứng' (ví dụ này), bạn sẽ nhận được cảnh báo và lịch sử khóa sẽ được đặt lại.

EDIT:Đã cập nhật mã để cắt ngắn chuỗi nếu quá dài.

Answer 2

Trước đó tôi đã sử dụng mã này để sử dụng mũi tên lên/xuống để cuộn qua danh sách, bạn nên mở rộng quy trình này để kiểm tra một tổ hợp phím nhất định.

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

Sử dụng jQuery:

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

này bắt ép chính trên toàn bộ trang không chỉ là một yếu tố cụ thể.

This blog post chi tiết cách chụp CTRL + Phím tắt chính.

Answer 4

Tôi không chắc chắn về mã khóa chính xác, tôi mượn từ câu trả lời của Hans Kov. Tôi sẽ sử dụng một mảng như một ngăn xếp và chỉ cần nhấn một phím mới vào ngăn xếp, sau đó bật chúng ra để kiểm tra đúng thứ tự.

<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

Trong hoàn cảnh như vậy nó cũng có thể có ích để có thể kiểm tra các phím ctl/alt/ca:

if (e.altKey) { 
} 

if (e.ctrlKey) { 
} 

if (e.shiftKey) { 
} 

Đối với mã phím nhấn, các đối tượng sau đây theo nghĩa đen sẽ giúp:

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 
} 

Vì vậy, thay vì:

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

Chúng tôi có thể nói:

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

Điều này khuyến khích mã tự viết, dễ đọc và dễ bảo trì hơn.

Answer 6

đây là cách dễ dàng để yêu cầu khóa ctrl được giữ trong khi người dùng nhập chuỗi ký tự. dễ hơn một chút so với một số câu trả lời. trong trường hợp dưới đây nhấn và giữ phím ctrl trong khi gõ "quack" (không có dấu ngoặc kép) sẽ kích hoạt cảnh báo. hth ai đó, một ngày nào đó.

 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

Điều này có thể?

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