Wie erkennt man das Drücken einer Escape-Taste mit reinem JS oder jQuery?

Mögliches Duplikat:
Welcher Schlüsselcode für den Escape-Schlüssel mit jQuery

Wie erkennt man das Drücken der Escape-Taste in IE, Firefox und Chrome? Der folgende Code funktioniert in IE und Warnungen 27, in Firefox jedoch0

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

Hinweis: keyCodewird immer deprecated Verwendung keystatt.

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

Hier ist jsfiddle

keyCode wird veraltet

Es scheint keydownund keyupfunktioniert, auch wenn keypresses nicht möglich ist

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

Welcher Schlüsselcode für den Escape-Schlüssel mit jQuery

Die keydownVeranstaltung funktioniert gut für Escape und bietet den Vorteil, dass Sie sie keyCodein allen Browsern verwenden können. Außerdem müssen Sie den Hörer an documentden Körper und nicht an den Körper anhängen .

Update Mai 2016

keyCodewird derzeit nicht mehr unterstützt und die meisten modernen Browser bieten die keyEigenschaft jetzt an, obwohl Sie vorerst noch einen Fallback für eine angemessene Browserunterstützung benötigen (zum Zeitpunkt des Schreibens unterstützen die aktuellen Versionen von Chrome und Safari diese nicht).

Das Update September 2018 evt.key wird jetzt von allen modernen Browsern unterstützt.

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

Mit JavaScript können Sie die funktionierende jsfiddle überprüfen

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

Mit jQuery können Sie die funktionierende jsfiddle überprüfen

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

auf keyCode&& which& keyup|| prüfenkeydown

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

Der beste Weg ist, dafür eine Funktion zu machen

FUNKTION:

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

BEISPIEL:

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

Unten finden Sie den Code, der nicht nur die ESC-Taste deaktiviert, sondern auch den Zustand überprüft, in dem sie gedrückt wird, und je nach Situation die Aktion ausführt oder nicht.

In diesem Beispiel ist

e.preventDefault();

deaktiviert die ESC-Tastendruckaktion.

Sie können alles tun, um ein Div damit zu verstecken:

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

Wo die ESC-Taste gedrückt wird, wird auch berücksichtigt:

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

Sie können diesen Bedingungsteil entfernen, wenn Sie dies auf alle anwenden möchten. Oder Sie können INPUT hier als Ziel festlegen, um diese Aktion nur anzuwenden, wenn sich der Cursor im Eingabefeld befindet.

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

Ich denke, der einfachste Weg ist Vanille-Javascript:

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