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

Ich habe zwei Funktionen. Wenn die Eingabetaste gedrückt wird, werden die Funktionen korrekt ausgeführt, beim Drücken der Escape-Taste jedoch nicht. Was ist die richtige Nummer für den Escape-Schlüssel?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

Versuchen Sie es mit dem Keyup-Ereignis :

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});

Anstatt die Keycode-Werte in Ihrer Funktion fest zu codieren, sollten Sie benannte Konstanten verwenden, um Ihre Bedeutung besser zu vermitteln:

var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ENTER) $('.save').click();
  if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});

Einige Browser (wie FireFox, andere nicht sicher) definieren ein globales KeyEventObjekt, das diese Arten von Konstanten für Sie verfügbar macht. Diese SO-Frage zeigt eine gute Möglichkeit, dieses Objekt auch in anderen Browsern zu definieren.

(Antwort aus meinem vorherigen Kommentar extrahiert )

Sie müssen keyupeher als verwenden keypress. z.B:

$(document).keyup(function(e) {
  if (e.which == 13) $('.save').click();     // enter
  if (e.which == 27) $('.cancel').click();   // esc
});

keypressscheint nicht konsistent zwischen Browsern gehandhabt zu werden (probieren Sie die Demo unter http://api.jquery.com/keypress in IE vs Chrome vs Firefox aus. Manchmal keypresswird sie nicht registriert und die Werte für 'which' und ' keyCode 'variieren), während keyupkonsistent ist.

Da es einige Diskussionen über e.whichvs gab e.keyCode: Beachten Sie, dass dies e.whichder jquery-normalisierte Wert ist und für die Verwendung empfohlen wird:

Die Eigenschaft event.which normalisiert event.keyCode und event.charCode. Es wird empfohlen, event.which für die Tastatureingabe zu beobachten.

(von http://api.jquery.com/event.which/ )

Verwenden Sie diese einfache Funktion, um den Schlüsselcode für einen Schlüssel zu finden:

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}

27ist der Code für den Escape-Schlüssel. :) :)

Ihre beste Wette ist

$(document).keyup(function(e) { 
    if (e.which === 13) $('.save').click();   // enter 
    if (e.which === 27) $('.cancel').click(); // esc   

    /* OPTIONAL: Only if you want other elements to ignore event */
    e.preventDefault();
    e.stopPropagation();
});

Zusammenfassung

• whichist vorzuziehen als keyCodeweil es normalisiert ist
• keyupist vorzuziehen, als keydownweil das Keydown mehrmals auftreten kann, wenn der Benutzer es gedrückt hält.
• Verwenden keypressSie diese Option nur, wenn Sie tatsächliche Zeichen erfassen möchten.

Interessanterweise verwendet Bootstrap Keydown und KeyCode in seiner Dropdown-Komponente (ab 3.0.2)! Ich denke, es ist dort wahrscheinlich eine schlechte Wahl.

Zugehöriges Snippet aus dem JQuery-Dokument

Während Browser unterschiedliche Eigenschaften zum Speichern dieser Informationen verwenden, normalisiert jQuery die Eigenschaft .which, sodass Sie sie zuverlässig zum Abrufen des Schlüsselcodes verwenden können. Dieser Code entspricht einer Taste auf der Tastatur, einschließlich Codes für Sondertasten wie Pfeile. Zum Abfangen der tatsächlichen Texteingabe ist .keypress () möglicherweise die bessere Wahl.

Weitere interessante Elemente : JavaScript Keypress Library

Probieren Sie das jEscape- Plugin aus ( Download von Google Drive )

$(document).escape(function() { 
   alert('ESC button pressed'); 
});

oder Schlüsselcode für Cross-Browser erhalten

var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');

Vielleicht können Sie Schalter verwenden

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}

Ihr Code funktioniert einwandfrei. Es ist höchstwahrscheinlich das Fenster, das nicht fokussiert ist. Ich benutze eine ähnliche Funktion, um Iframe-Boxen usw. zu schließen.

$(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

});

$(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
      parent.document.getElementById('iframediv').style.display='none';
      parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

});

Ich habe versucht, das Gleiche zu tun, und es hat mich fertig gemacht. In Firefox scheint es so zu sein, dass, wenn Sie versuchen, einige Dinge zu tun, während die Escape-Taste gedrückt wird, die Escape-Taste weiter verarbeitet wird, wodurch alles abgebrochen wird, was Sie versucht haben. Alarm funktioniert gut. Aber in meinem Fall wollte ich in die Geschichte zurückgehen, die nicht funktionierte. Endlich herausgefunden, dass ich die Ausbreitung des Ereignisses erzwingen musste, um zu stoppen, wie unten gezeigt ...

if (keyCode == 27)
{
    history.back();

    if (window.event)
    {
        // IE works fine anyways so this isn't really needed
        e.cancelBubble = true;
        e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
        // In firefox, this is what keeps the escape key from canceling the history.back()
        e.stopPropagation();
        e.preventDefault();
    }

    return (false);
}

Um zu erklären, wo andere Antworten nicht haben; Das Problem ist Ihre Verwendung von keypress.

Vielleicht ist das Ereignis nur falsch benannt, aber keypressdefiniert, um zu feuern, wenn . Dh Text. Was Sie wollen, ist / , das wann immer (vorher oder nachher) ausgelöst wird.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey . Dh diese Dinge auf der Tastatur.

Der Unterschied tritt hier auf, weil esces sich um ein Steuerzeichen handelt (wörtlich "nicht druckbares Zeichen") und daher keinen Text schreibt und somit nicht einmal ausgelöst wird keypress.
enterist seltsam, denn obwohl Sie es als Steuerzeichen verwenden (dh um die Benutzeroberfläche zu steuern), wird immer noch ein neues Zeilenzeichen eingefügt, das ausgelöst wird keypress.

Quelle: Quirksmode

So erhalten Sie den Hex-Code für alle Zeichen: http://asciitable.com/

e.keyCodeSenden Sie einfach eine aktualisierte Antwort, die auf MDN als DEPRECATED gilt .

e.keyStattdessen sollten Sie sich für eine Option entscheiden , die saubere Namen für alles unterstützt. Hier ist die relevante Kopie Pasta

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

Eine robuste Javascript-Bibliothek zum Erfassen von Tastatureingaben und eingegebenen Tastenkombinationen. Es hat keine Abhängigkeiten.

http://jaywcjlove.github.io/hotkeys/

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

Hotkeys versteht die folgenden Modifikatoren: ⇧, shiftoption⌥altctrlcontrolcommand, und ⌘.

Die folgenden Sondertasten können für Verknüpfungen verwendet werden: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteund f1durch f19.

Ich habe immer keyup und e.which verwendet, um den Escape-Schlüssel zu fangen.

Ich weiß, dass diese Frage nach jquery fragt, aber für diejenigen, die jqueryui verwenden, gibt es Konstanten für viele der Schlüsselcodes:

$.ui.keyCode.ESCAPE

http://api.jqueryui.com/jQuery.ui.keyCode/