Làm cách nào để phát hiện phím bấm thoát với JS hoặc jQuery thuần?

Có thể trùng lặp: Mã khóa
nào cho khóa thoát với jQuery

Làm cách nào để phát hiện phím bấm thoát trong IE, Firefox và Chrome? Mã bên dưới hoạt động trong IE và cảnh báo 27, nhưng trong Firefox nó cảnh báo0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});

Lưu ý: keyCodeđang được sử dụng keythay thế.

function keyPress (e) {
    if(e.key === "Escape") {
        // write your logic here.
    }
}

Đây là jsfiddle

keyCode đang bị phản đối

Nó dường như keydownvà keyuplàm việc, mặc dù keypresscó thể không

$(document).keyup(function(e) {
     if (e.key === "Escape") { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

Mã khóa nào cho khóa thoát với jQuery

Sự keydownkiện này sẽ hoạt động tốt cho Escape và có lợi ích là cho phép bạn sử dụng keyCodetrong tất cả các trình duyệt. Ngoài ra, bạn cần phải gắn người nghe documentchứ không phải cơ thể.

Cập nhật tháng 5 năm 2016

keyCodehiện đang trong quá trình không còn sử dụng nữa và hầu hết các trình duyệt hiện đại đều cung cấp keytài sản ngay bây giờ, mặc dù hiện tại bạn vẫn cần một dự phòng hỗ trợ trình duyệt phù hợp (tại thời điểm viết các bản phát hành hiện tại của Chrome và Safari không hỗ trợ nó).

Cập nhật tháng 9 năm 2018 evt.key hiện được hỗ trợ bởi tất cả các trình duyệt hiện đại.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        alert("Escape");
    }
};

Click me then press the Escape key

Sử dụng JavaScript, bạn có thể kiểm tra jsfiddle đang hoạt động

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert('Esc key pressed.');
    }
};

Sử dụng jQuery bạn có thể kiểm tra jsfiddle làm việc

jQuery(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       alert('Esc key pressed.');
    }
});

kiểm tra keyCode&& which& keyup||keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

Cách tốt nhất là tạo chức năng cho việc này

CHỨC NĂNG:

$.fn.escape = function (callback) {
    return this.each(function () {
        $(document).on("keydown", this, function (e) {
            var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
            if (keycode === 27) {
                callback.call(this, e);
            };
        });
    });
};

THÍ DỤ:

$("#my-div").escape(function () {
    alert('Escape!');
})

Dưới đây là mã không chỉ vô hiệu hóa phím ESC mà còn kiểm tra tình trạng nơi nó được nhấn và tùy thuộc vào tình huống, nó sẽ thực hiện hành động hay không.

Trong ví dụ này,

e.preventDefault();

sẽ vô hiệu hóa hành động nhấn phím ESC.

Bạn có thể làm bất cứ điều gì muốn ẩn một div với điều này:

document.getElementById('myDivId').style.display = 'none';

Trường hợp phím ESC được nhấn cũng được xem xét:

(e.target.nodeName=='BODY')

Bạn có thể loại bỏ phần này nếu phần điều kiện nếu bạn muốn áp dụng cho phần này. Hoặc bạn có thể nhắm mục tiêu INPUT tại đây để chỉ áp dụng hành động này khi con trỏ ở trong hộp nhập.

window.addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
        e.preventDefault();
        return false;
    }
}, true);

Tôi nghĩ cách đơn giản nhất là vanilla javascript:

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}