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

559

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)
});
Shishant
quelle
Durch Drücken der Taste wird ein mit einer Taste verbundenes Zeichen zurückgegeben (in korrekten Großbuchstaben usw.). Durch Drücken der Taste wird die Anzahl der gedrückten Hardwaretasten zurückgegeben. Für ESC möchten Sie den Hardware-Code 27 (nicht das ASCII-Zeichen 27)
Joeri
Es gibt einen wirklich einfachen Trick, um herauszufinden, welchen Schlüsselcode Sie wollen. Öffnen Sie einfach einen neuen Tab, fügen Sie ihn document.addEventListener("keydown", e => console.log(e.keyCode))in Ihre Browserkonsole ein, klicken Sie in das Fenster und drücken Sie die gewünschte Taste.
Anarchist912

Antworten:

925

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
});
CMS
quelle
39
Dies hat nichts mit Tastendruck oder Tastendruck zu tun. Um ESCAPE zu erfassen, müssen Sie sich e.keyCode und nicht e.which ansehen (was in diesem Beispiel der Fall ist).
Dkamins
211
"Das hat nichts mit Keyup vs. Keypress zu tun" - das ist falsch, dkamins. Der Tastendruck scheint zwischen den Browsern nicht konsistent gehandhabt zu werden (probieren Sie die Demo unter api.jquery.com/keypress in IE vs Chrome vs Firefox aus - manchmal wird er nicht registriert und sowohl 'which' als auch 'keyCode' variieren). während Keyup konsistent ist. Dies ist der jquery-normalisierte Wert, also sollten 'which' oder 'keyCode' beide in keyup funktionieren.
Jordan Brough
13
@ Jordan Brough - Ich möchte Sie bitten, Ihren Kommentar als Antwort zu veröffentlichen, damit die Leute ihn lesen und die tatsächliche Bedeutung Ihres Kommentars verstehen! da dein Kommentar genauso wichtig ist wie die erklärende Antwort
Murtaza
15
keydownahmt das native Verhalten nach - zumindest unter Windows, wo das Drücken von ESC oder Zurück in einem Dialogfeld die Aktion auslöst, bevor die Taste losgelassen wird.
Thomthom
2
@ Gibberish Ich habe meinen Kommentar als Antwort hier hinzugefügt: stackoverflow.com/a/28502629/58876
Jordan Brough
77

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.

Seth Petry-Johnson
quelle
15
Was, 27 springt dich nicht einfach als Fluchtschlüssel an?!? Ehrlich gesagt muss dies wirklich von mehr Menschen getan werden. Ich nenne sie "magische Zahlen" und "magische Saiten". Was bedeutet 72? Warum haben Sie eine sehr spezifische und flüchtige Zeichenfolge, die 300 Mal in Ihre Codebasis kopiert wurde? usw.
Vbullinger
1
Oder Sie können einfach jeweils einen Kommentar hinzufügen, da Sie diese wahrscheinlich nur einmal verwenden. IMO genauso lesbar
Ivan Durst
8
@IvanDurst Sie verwenden sie möglicherweise nur einmal pro Methode , aber ich verwende sie in meinen Projekten mehrmals. Schlagen Sie wirklich vor, dass Sie (1) die Werte nachschlagen und (2) jedes Mal kommentieren möchten, wenn Sie einen Schlüsselcode verwenden möchten? Ich weiß nichts über dich, aber ich habe weder den Wunsch, sie auswendig zu lernen, noch den Glauben, dass andere Programmierer sie konsequent kommentieren werden. Es geht darum, das Codieren einfacher und konsistenter zu machen und nicht nur besser lesbar zu machen.
Seth Petry-Johnson
2
Jemand, der weiß, was er bedeutet, muss nicht nach der Bedeutung suchen, um ihn zu kommentieren, und das Eingeben eines Kommentars ist genauso schnell wie das Eingeben eines langen Namens.
NetMage
6
Was ist mit den guten alten Zeiten passiert, als wir Zeichenkonstanten in Hex codierten? Jeder weiß, dass ESC ist 0x1Bund Enter ist 0x0D, richtig?
David R Tribble
42

(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/ )

Jordan Brough
quelle
5
Ich möchte hier auch hinzufügen, dass Browser, die keypressbei der Flucht nicht ausgelöst werden, es richtig machen. keypresssoll nur feuern, wenn der Schlüssel einen Charakter erzeugt, während keyupimmer feuert. developer.mozilla.org/en-US/docs/Web/Events/keypress
ohcibi
26

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

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

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

Salzig
quelle
1
Ich habe zwei Funktionen, wenn die Eingabetaste gedrückt wird. Die Funktionen werden korrekt ausgeführt, jedoch nicht mit der Escape-Taste. $ (Dokument) .keypress (Funktion (e) {if (e.which == 13) {$ ('. Save'). Click ();} if (e.which == 27) {$ ('. cancel'). click ();}});
Shishant
$ (Dokument) .keypress (Funktion (e) {y = e.keyCode? e.keyCode: e.which;}); Wenn ich (y) alarmiere, werden 27 in IE und FF benachrichtigt. Sind Sie sicher, dass mit Ihrem Code nichts anderes nicht stimmt?
Salzig
14

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

Shital Shah
quelle
10

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;
}
S. Ferit Arslan
quelle
8

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

});
Eric Herlitz
quelle
8

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);
}
Billy Buerger
quelle
8

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

Hashbrown
quelle
1
Ein großes Lob für das Lesen der Spezifikation! Dies sollte auf
jeden
7

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

Julien
quelle
2
Ich wollte sagen ... Ich hasse es, dass diese Seite ganz oben in den Suchergebnissen steht, weil sie so verdammt hässlich ist, aber die notwendigen Informationen vermittelt.
Mpen
1
Beachten Sie, dass die Schlüsselcodes je nach Ereignis und Browser nicht immer mit den ASCII-Tabellen übereinstimmen.
Alan H.
2
downvote: beantwortet die Frage nicht, geht nicht einmal auf die Frage ein, hex hat nichts mit der Frage zu tun und OP hat bereits Kenntnisse über esc == 27 gezeigt.
Jeremy
7

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);
aug
quelle
3
Es scheint jedoch nur in Firefox und Chrome unterstützt zu werden.
Gayan Weerakutti
Leider übergeben zumindest einige Versionen von Internet Explorer den Code Escund nicht den Standard Escape.
Robin Stewart
6

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: , shiftoptionaltctrlcontrolcommand, 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.

小弟 调 调
quelle
5

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

Dalius I.
quelle