Làm cách nào để ghi lại thao tác nhấn phím, ví dụ: Ctrl + Z, mà không cần đặt một phần tử đầu vào trên trang trong JavaScript? Có vẻ như trong IE, các sự kiện nhấn phím và gõ phím chỉ có thể được liên kết với các phần tử đầu vào (hộp nhập, vùng văn bản, v.v.)

jQuery cũng có một triển khai tuyệt vời cực kỳ dễ sử dụng. Đây là cách bạn có thể triển khai chức năng này trên các trình duyệt:

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

Đã thử nghiệm trong IE7, Firefox 3.6.3 & Chrome 4.1.249.1064

Một cách khác để làm điều này là sử dụng sự kiện keydown và theo dõi event.keyCode. Tuy nhiên, vì jQuery chuẩn hóa keyCode và charCode bằng event.which, thông số kỹ thuật của họ khuyên bạn nên sử dụng event.which trong nhiều trường hợp:

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});

Đối với các phím không thể in được, chẳng hạn như phím mũi tên và phím tắt như Ctrl-z, Ctrl-x, Ctrl-c có thể kích hoạt một số hành động trong trình duyệt (ví dụ: bên trong tài liệu hoặc phần tử có thể chỉnh sửa), bạn có thể không nhận được phím bấm sự kiện trong tất cả các trình duyệt. Vì lý do này, bạn phải sử dụng keydownthay thế, nếu bạn muốn ngăn chặn hành động mặc định của trình duyệt. Nếu không, keyupsẽ làm tốt.

Đính kèm một keydownsự kiện để documenthoạt động trong tất cả các trình duyệt chính:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

Để có tài liệu tham khảo đầy đủ, tôi thực sự giới thiệu bài viết của Jan Wolter về xử lý khóa JavaScript .

Đối với JS hiện đại, hãy sử dụng event.key!

document.addEventListener("keypress", function onPress(event) {
    if (event.key === "z" && event.ctrlKey) {
        // Do something awesome
    }
});

LƯU Ý: Các thuộc tính cũ ( .keyCodevà .which) không được dùng nữa.

Tài liệu Mozilla

Các trình duyệt được hỗ trợ

Phát hiện phím bấm, bao gồm các tổ hợp phím:

window.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.keyCode == 90) {
    // Ctrl + z pressed
  }
});

Lợi ích ở đây là bạn không ghi đè lên bất kỳ thuộc tính toàn cục nào, mà thay vào đó chỉ là giới thiệu một tác dụng phụ. Không tốt, nhưng chắc chắn ít bất chính hơn rất nhiều so với các đề xuất khác ở đây.

Mã & phát hiện ctrl + z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}