Saf JS veya jQuery ile kaçış tuşuna basmayı nasıl tespit edebilirim?

Olası Çoğaltma:
jQuery ile kaçış anahtarı için hangi anahtar kodu

IE, Firefox ve Chrome'da kaçış tuşuna basmayı nasıl tespit edebilirim? Aşağıdaki kod IE'de çalışır ve uyarır 27, ancak Firefox'ta uyarır0

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

Not: keyCodeedilir kaldırılan alma kullanımını keyyerine.

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

İşte jsfiddle

keyCode kullanımdan kaldırılıyor

Öyle görünüyor keydownve keyupeser halde keypressolmayabilir

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

JQuery ile kaçış anahtarı için hangi anahtar kodu

keydownOlay Escape cezasını çalışmak ve kullanmak için izin yararı vardır edecek keyCodetüm tarayıcılarda. Ayrıca, dinleyiciyi documentvücuda değil de bağlamanız gerekir .

Mayıs 2016 Güncellemesi

keyCodeşu anda kullanımdan kaldırılıyor ve çoğu modern tarayıcı keyözelliği şimdi sunuyor, ancak şimdilik iyi tarayıcı desteği için bir geri dönüşe ihtiyacınız olacak (Chrome ve Safari'nin mevcut sürümlerini yazarken desteklemiyor).

Eylül 2018 Güncellemesi evt.key artık tüm modern tarayıcılar tarafından destekleniyor.

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

JavaScript kullanarak jsfiddle çalışmasını kontrol edebilirsiniz

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

JQuery kullanarak jsfiddle çalışma kontrol edebilirsiniz

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

denetlemek keyCode&& which& keyup||keydown

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

Bunun için işlev yapmanın en iyi yolu

İŞLEVİ:

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

MİSAL:

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

Aşağıda sadece ESC anahtarını devre dışı bırakmakla kalmayıp aynı zamanda basıldığı durumu da kontrol eden kod ve duruma bağlı olarak eylemi gerçekleştirecek veya etmeyecek.

Bu örnekte,

e.preventDefault();

ESC tuş basma eylemini devre dışı bırakır.

Bununla bir div'ı gizlemek gibi bir şey yapabilirsiniz:

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

ESC tuşuna basıldığında da dikkate alınır:

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

Eğer herkese uygulamak istiyorsanız, koşul kısmı varsa bunu kaldırabilirsiniz. Veya bu eylemi yalnızca imleç giriş kutusundayken uygulamak için INPUT hedefleyebilirsiniz.

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

en basit yol vanilya javascript olduğunu düşünüyorum:

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