Bagaimana cara mendeteksi tombol escape dengan JS atau jQuery murni?

Kemungkinan Duplikat:
Kode kunci mana untuk tombol melarikan diri dengan jQuery

Bagaimana cara mendeteksi tombol escape di IE, Firefox dan Chrome? Kode di bawah ini berfungsi di IE dan lansiran 27, tetapi di Firefox lansiran0

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

Catatan: keyCodeini semakin usang digunakan keysebagai gantinya.

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

Ini jsfiddle

keyCode Semakin ditinggalkan

Tampaknya keydowndan keyupberhasil, meskipun keypressmungkin tidak

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

Kode kunci untuk tombol melarikan diri dengan jQuery

The keydownAcara akan bekerja dengan baik untuk melarikan diri dan memiliki manfaat yang memungkinkan Anda untuk menggunakan keyCodedi semua browser. Juga, Anda perlu melampirkan pendengar documentdaripada tubuh.

Perbarui Mei 2016

keyCode sekarang sedang dalam proses menjadi usang dan sebagian besar browser modern menawarkan key properti sekarang, meskipun Anda masih akan membutuhkan mundur untuk dukungan browser yang layak untuk saat ini (saat menulis rilis Chrome dan Safari saat ini tidak mendukungnya).

Pembaruan September 2018 evt.key sekarang didukung oleh semua browser modern.

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

Menggunakan JavaScript, Anda dapat melakukan pemeriksaan jsfiddle

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

Menggunakan jQuery, Anda dapat melakukan pemeriksaan jsfiddle

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

periksa keyCode&& which& keyup||keydown

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

Cara terbaik adalah membuat fungsi untuk ini

FUNGSI:

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

CONTOH:

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

Di bawah ini adalah kode yang tidak hanya menonaktifkan kunci ESC tetapi juga memeriksa kondisi di mana ia ditekan dan tergantung pada situasinya, ia akan melakukan tindakan atau tidak.

Dalam contoh ini,

e.preventDefault();

akan menonaktifkan aksi tekan tombol ESC.

Anda dapat melakukan sesuatu seperti menyembunyikan div dengan ini:

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

Di mana tombol ESC ditekan juga dipertimbangkan:

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

Anda dapat menghapus bagian ini jika syarat jika Anda ingin menerapkan ini untuk semua. Atau Anda dapat menargetkan INPUT di sini untuk hanya menerapkan tindakan ini ketika kursor berada di kotak input.

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

saya pikir cara paling sederhana adalah vanilla javascript:

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