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

Mögliches Duplikat:

Welcher Keycode für Escape-Taste mit jQuery

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

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

Notiz: keyCode ist veraltet werdenbenutzen key stattdessen.

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

Code-Auszug:

var msg = document.getElementById('state-msg');

document.body.addEventListener('keypress', function(e) {
  if (e.key == "Escape") {
    msg.textContent += 'Escape pressed:'
  }
});

Press ESC key <span id="state-msg"></span>

keyCode wird veraltet

Es scheint keydown und keyup Arbeit, obwohl keypress nicht dürfen

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

Welcher Keycode für Escape-Taste mit jQuery

Der keydown event funktioniert gut für Escape und hat den Vorteil, dass Sie es verwenden können keyCode in allen Browsern. Außerdem müssen Sie den Listener anhängen document eher als der Körper.

Aktualisierung Mai 2016

keyCode ist jetzt dabei, veraltet zu sein, und die meisten modernen Browser bieten die key -Eigenschaft, obwohl Sie vorerst noch einen Fallback für eine anständige Browserunterstützung benötigen (zum Zeitpunkt des Schreibens unterstützen die aktuellen Versionen von Chrome und Safari dies nicht).

Aktualisierung 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

Verwenden JavaScript Sie können die Arbeit überprüfen jsfiddle

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

Verwenden jQuery Sie können die Arbeit überprüfen jsfiddle

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

überprüfe auf keyCode && which & keyup || keydown

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

Unten ist der Code, der nicht nur die ESC-Taste deaktiviert, sondern auch die Bedingung überprüft, wo sie gedrückt wird, und je nach Situation die Aktion ausführt oder nicht.

In diesem Beispiel

e.preventDefault();

deaktiviert die ESC-Tastendruckaktion.

Sie können so etwas tun, um ein Div zu verstecken:

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

Dabei wird auch die gedrückte ESC-Taste berücksichtigt:

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

Sie können diesen if-Bedingungsteil entfernen, wenn Sie dies für alle gelten möchten. Oder Sie können hier auf INPUT zielen, 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);

Reines JS

Sie können einen Listener anhängen keyUp Ereignis für das Dokument.

Wenn Sie sichergehen möchten, dass keine andere Taste gleichzeitig gedrückt wird Esc Schlüssel können Sie Werte von verwenden ctrlKey, altKeyund shifkey.

 document.addEventListener('keydown', (event) => {
        
        if (event.key === 'Escape') {
         //if esc key was not pressed in combination with ctrl or alt or shift
            const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
            if (isNotCombinedKey) {
                console.log('Escape key was pressed with out any group keys')
              
            }
        }
    });

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!');
})