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

524

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
    }
});
Mithun Sreedharan
quelle
1
zuerst eine Browsererkennung durchführen?
Ina
7
Ich finde quirksmode.org immer zuverlässig, um herauszufinden, was in welchem ​​Browser funktioniert : quirksmode.org/js/keys.html . Dort finden Sie das nur keyupoder keydownin Kombination mit keyCodefunktioniert in allen Browsern.
Felix Kling
1
Ich denke, der Titel dieser Frage sollte lauten: "Wie erkennt man das Drücken einer Escape-Taste mit jquery?" Oder die Antworten sollten in nativem Javascript sein ...
Wilt
3
$(document).on("keyup", function (e) {var code = e.keyCode || e.which; alert('key pressed: ' + code);});Grüße aus dem Jahr 2014
Kalle H. Väravas

Antworten:

957

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

Jigar Joshi
quelle
11
zum Aufheben der Bindung: $ (document) .unbind ("keyup", keyUpFunc);
Plattsy
54
Zum Aufheben der Bindung können Sie auch einen Namespace für das Ereignis verwenden $(document).on('keyup.unique_name', ...)und$(document).unbind('keyup.unique_name')
Lachlan McD.
9
Es wird empfohlen, e.which (anstelle von e.keycode) zu verwenden, um zu überprüfen, welche Taste gedrückt wurde. jQuery normalisiert Schlüsselcode und Zeichencode (in älteren Browsern verwendet)
DMTintner
1
@ DMTintner: zum gleichen Thema, siehe den Kommentar von Jordan Brough stackoverflow.com/a/1160109/759452
Adrien Be
8
Sie sollten immer verwenden ===.
pmandell
211

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

Tim Down
quelle
3
Beachten Sie, dass Sie den Listener auch einem <input>Element hinzufügen können. Er wird daher nur ausgelöst, wenn dieses Element den Fokus hat.
Mike
1
@Ranmocy: Was für ein Element ist das (das mit der ID 'Test')? Nur Elemente, die Fokus empfangen können (Formulareingaben, inhaltsbearbeitbare Elemente, Elemente mit gesetztem Tabindex), lösen Schlüsselereignisse aus.
Tim Down
1
Sie können auch überprüfen, if (evt.key === 'Escape') {anstatt die veraltetekeyCode
Keysox
1
@ Tobymackenzie: So ist es. Ist das nicht wunderbar? Willkommen in der schönen neuen Welt der standardbasierten Webentwicklung.
Tim Down
1
Wenn Sie wissen möchten, ob Sie sicher verwenden können .key, sehen Sie caniuse.com/#feat=keyboardevent-key
Jasper de Vries
37

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.');
    }
});
Subodh Ghulaxe
quelle
17

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

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});
jAndy
quelle
Ich sehe, dass dies nicht funktioniert, jsfiddle.net/GWJVt nur für die Flucht ... scheint umständlich?
Reigel
$ (document.body) .keypress () feuert nicht
Mithun Sreedharan
@ Reeigel: Scheint in der Tat nicht richtig mit Tastendruck zu funktionieren. Was auch immer, ich kann den "unangenehmen" Teil nicht herausfinden.
jAndy
3
KeyPress wird für Zeichentasten ausgelöst (im Gegensatz zu KeyDown und KeyUp, die auch für Nicht-Zeichentasten ausgelöst werden), während die Taste gedrückt wird.
Marta
7

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!');
})
Ivijan Stefan Stipić
quelle
4
Eigentlich scheint es, dass keypressder Escape-Schlüssel nicht ausgelöst wird. Zumindest nicht in Chrome auf einem Mac.
Samson
1
Vielen Dank für dieses Feedback. Ich habe eine Aktualisierungs- und Änderungsregel erstellt. keydowndas Problem lösen.
Ivijan Stefan Stipić
Ich habe Ihre Lösung aktualisiert, um eine "nur einmalige" Verwendung unterstützen zu können. Hier ist ein Beispiel: jsfiddle.net/oxok5x2p .
Dh
6

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);
Tarik
quelle
0

Ich denke, der einfachste Weg ist Vanille-Javascript:

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}
Duan Walker
quelle
6
Auf meinem Chrome (Version 55.0.2883.95 (64-Bit)) bekomme ich Escapeals event.keyund nicht 27
MosheZada
Es sollte event.keyCode27 sein.
Jens Törnell