Cách đơn giản nhất để phát hiện các phím bấm trong javascript

Question

Tôi có ý tưởng về một trò chơi bằng javascript (tôi sẽ tạo nó bằng EaselJS) và tôi sẽ phải phát hiện các phím bấm. Sau khi nhìn xung quanh trên internet tôi đã nhìn thấy rất nhiều gợi ý (sử dụng window.onkeypress, sử dụng jQuery, vv) nhưng đối với hầu hết các tùy chọn có một counterargument. Các anh đề nghị gì? Sử dụng jQuery cho điều này nghe có vẻ dễ dàng nhưng tôi hầu như không có kinh nghiệm với thư viện đó (và tôi cũng không phải là một cựu chiến binh ở javascript) vì vậy tôi muốn tránh nó. Nếu jQuery là lựa chọn tốt nhất, ai đó có thể đưa ra một ví dụ hay (với lời giải thích sẽ là tuyệt vời) về cách làm điều này?

Tôi đoán điều này được hỏi rất nhiều nhưng tôi không thể tìm thấy bất kỳ câu trả lời rõ ràng nào. Cảm ơn trước!

Answer 1

Với đồng bằng Javascript, đơn giản nhất là:

document.onkeypress = function (e) { 
    e = e || window.event; 
    // use e.keyCode 
}; 

Nhưng với điều này, bạn chỉ có thể ràng buộc một handler cho sự kiện này.

Bên cạnh đó, bạn có thể sử dụng sau đây để có thể có khả năng liên kết nhiều bộ xử lý đến cùng một sự kiện:

addEvent(document, "keypress", function (e) { 
    e = e || window.event; 
    // use e.keyCode 
}); 

function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent("on" + eventName, callback); 
    } else { 
     element["on" + eventName] = callback; 
    } 
} 

Trong cả hai trường hợp, keyCode là không đồng nhất giữa các trình duyệt, vì vậy có nhiều để kiểm tra và tìm ra. Chú ý e = e || window.event - đó là một vấn đề bình thường với Internet Explorer, đưa sự kiện vào window.event thay vì chuyển nó tới cuộc gọi lại.

Tài liệu tham khảo:

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

Với jQuery:

$(document).on("keypress", function (e) { 
    // use e.which 
}); 

tham khảo:

• http://api.jquery.com/on/

Khác với jQuery là một thư viện "lớn", jQuery thực sự giúp với mâu thuẫn giữa các trình duyệt, đặc biệt là với các sự kiện cửa sổ ... và không thể bị từ chối. Hy vọng rằng nó là hiển nhiên rằng mã jQuery tôi cung cấp cho ví dụ của bạn là nhiều hơn nữa thanh lịch và ngắn hơn, nhưng hoàn thành những gì bạn muốn một cách nhất quán. Bạn sẽ có thể tin tưởng rằng e (sự kiện) và e.which (mã khóa, để biết khóa nào đã được nhấn) là chính xác. Trong Javascript đơn giản, khó có thể biết được trừ khi bạn làm mọi thứ mà thư viện jQuery thực hiện.

Lưu ý có sự kiện keydown, khác với keypress. Bạn có thể tìm hiểu thêm về chúng tại đây: onKeyPress Vs. onKeyUp and onKeyDown

Để gợi ý nên sử dụng cái gì, tôi chắc chắn sẽ đề xuất sử dụng jQuery nếu bạn đang học về khuôn khổ. Đồng thời, tôi sẽ nói rằng bạn nên tìm hiểu cú pháp, phương thức, tính năng của Javascript và cách tương tác với DOM. Một khi bạn hiểu cách nó hoạt động và những gì đang xảy ra, bạn nên thoải mái hơn khi làm việc với jQuery. Đối với tôi, jQuery làm cho mọi thứ nhất quán hơn và ngắn gọn hơn. Cuối cùng, đó là Javascript và kết thúc tốt đẹp ngôn ngữ.

Ví dụ khác về jQuery rất hữu ích là với AJAX. Các trình duyệt không phù hợp với cách các yêu cầu AJAX được xử lý, do đó jQuery tóm tắt để bạn không phải lo lắng.

Dưới đây là một cái gì đó có thể giúp quyết định:

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

Answer 2

Có một vài cách để xử lý đó; Vanilla JavaScript có thể làm điều đó khá độc đáo:

function code(e) { 
    e = e || window.event; 
    return(e.keyCode || e.which); 
} 
window.onload = function(){ 
    document.onkeypress = function(e){ 
     var key = code(e); 
     // do something with key 
    }; 
}; 

Hoặc một cách có cấu trúc hơn về xử lý nó:

(function(d){ 
    var modern = (d.addEventListener), event = function(obj, evt, fn){ 
     if(modern) { 
      obj.addEventListener(evt, fn, false); 
     } else { 
      obj.attachEvent("on" + evt, fn); 
     } 
    }, code = function(e){ 
     e = e || window.event; 
     return(e.keyCode || e.which); 
    }, init = function(){ 
     event(d, "keypress", function(e){ 
      var key = code(e); 
      // do stuff with key here 
     }); 
    }; 
    if(modern) { 
     d.addEventListener("DOMContentLoaded", init, false); 
    } else { 
     d.attachEvent("onreadystatechange", function(){ 
      if(d.readyState === "complete") { 
       init(); 
      } 
     }); 
    } 
})(document); 

Answer 3

keyPress
(nhập key)

Vanilla:

document.addEventListener("keypress", function(event) { 
    if (event.keyCode == 13) { 
     alert('hi.') 
    } 
}) 

Vanilla viết tắt:

this.addEventListener('keypress', (event) => { 
    if (event.keyCode == 13) { 
     alert('hi.') 
    } 
}) 

jQuery:

$(this).on('keypress', function(event) { 
    if (event.keyCode == 13) { 
     alert('hi.') 
    } 
}) 

jQuery cổ điển:

$(this).keypress(function(event) { 
    if (event.keyCode == 13) { 
     alert('hi.') 
    } 
}) 

jQuery viết tắt:

$(this).keypress((e) => { 
    if (e.which == 13) { 
     alert('hi.') 
    } 
}) 

Thậm chí ngắn hơn:

$(this).keypress(e=> 
    e.which==13? 
    alert('hi.'):null 
) 

demo

Answer 4

Sử dụng event.key và JS hiện đại!

Không có mã số nữa. Bạn có thể sử dụng trực tiếp "Enter", "LeftArrow", "r" hoặc bất kỳ tên khóa nào, làm cho mã của bạn dễ đọc hơn nhiều.

document.addEventListener("keypress", function onEvent(event) { 
    if (event.key === "LeftArrow") { 
     // Move Left 
    } 
    else if (event.key === "Enter") { 
     // Open Menu... 
    } 
}); 

Mozilla Docs

Supported Browsers