Który kod dostępu do klawisza Escape w jQuery

Mam dwie funkcje. Po naciśnięciu Enter funkcje działają poprawnie, ale po naciśnięciu klawisza Escape nie. Jaka jest poprawna liczba dla klawisza Escape?

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

Spróbuj ze zdarzeniem keyup :

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

Zamiast na stałe kodować wartości kodu w funkcji, rozważ użycie nazwanych stałych, aby lepiej przekazać swoje znaczenie:

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();
});

Niektóre przeglądarki (takie jak FireFox, niepewne innych) definiują KeyEventobiekt globalny, który udostępnia ci tego rodzaju stałe. To pytanie SO pokazuje fajny sposób zdefiniowania tego obiektu również w innych przeglądarkach.

(Odpowiedź pochodzi z mojego poprzedniego komentarza )

Musisz użyć keyupzamiast keypress. na przykład:

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

keypresswydaje się, że nie jest obsługiwany konsekwentnie między przeglądarkami (wypróbuj wersję demo na http://api.jquery.com/keypress w IE vs Chrome vs Firefox. Czasami keypresssię nie rejestruje, a wartości zarówno „które”, jak i „ keyCode 'różnią się), ale keyupjest spójny.

Ponieważ była dyskusja na temat e.whichvs e.keyCode: Uwaga, e.whichjest to wartość znormalizowana dla jquery i jest zalecana do użycia:

Właściwość event.which normalizuje event.keyCode i event.charCode. Zaleca się obejrzenie zdarzenia, które służy do wprowadzania danych z klawiatury.

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

Aby znaleźć kod dla dowolnego klawisza, użyj tej prostej funkcji:

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

27jest kodem klawisza Escape. :)

Twój najlepszy zakład to

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

Podsumowanie

• whichjest bardziej preferowany niż keyCodedlatego, że jest znormalizowany
• keyupjest bardziej preferowane niż keydowndlatego, że klawisz skrótu może wystąpić wiele razy, jeśli użytkownik będzie go przytrzymywał.
• Nie używaj, keypresschyba że chcesz uchwycić rzeczywiste postacie.

Co ciekawe, Bootstrap używa keydown i keyCode w rozwijanym komponencie (od 3.0.2)! Myślę, że jest to prawdopodobnie zły wybór.

Powiązany fragment z dokumentu JQuery

Podczas gdy przeglądarki używają różnych właściwości do przechowywania tych informacji, jQuery normalizuje właściwość .which, dzięki czemu można niezawodnie użyć jej do pobrania kodu klucza. Ten kod odpowiada klawiszowi na klawiaturze, w tym kodom specjalnych klawiszy, takich jak strzałki. Do przechwytywania rzeczywistego wpisu tekstu lepszym wyborem może być .keypress ().

Inne interesujące przedmioty: JavaScript Keypress Library

Wypróbuj wtyczkę jEscape ( pobierz z dysku Google )

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

lub uzyskaj kod dostępu do przeglądarki

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

może możesz użyć przełącznika

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

Twój kod działa dobrze. Najprawdopodobniej okno nie jest skoncentrowane. Używam podobnej funkcji do zamykania ramek iframe itp.

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

});

Próbowałem zrobić to samo i to mnie wyśmiewało. W Firefoksie wygląda na to, że jeśli spróbujesz wykonać pewne czynności po naciśnięciu klawisza Escape, kontynuuje on przetwarzanie klawisza Escape, który następnie anuluje wszystko, co próbujesz zrobić. Alert działa dobrze. Ale w moim przypadku chciałem wrócić do historii, która nie zadziałała. W końcu zorientowałem się, że muszę zmusić propagację zdarzenia do zatrzymania, jak pokazano poniżej ...

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

Wyjaśnić, gdzie nie ma innych odpowiedzi; problemem jest twoje użycie keypress.

Być może zdarzenie jest po prostu źle nazwane, ale keypressjest zdefiniowane jako uruchamiane, kiedy . Tj. Tekst. Natomiast tym, czego chcesz, jest / , który uruchamia się za każdym razem (odpowiednio przed lub po) . Tj. Te rzeczy na klawiaturze.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

Różnica pojawia się tutaj, ponieważ escjest to znak kontrolny (dosłownie „znak niedrukowalny”), więc nie pisze żadnego tekstu, a więc nawet nie odpala keypress.
enterjest dziwne, ponieważ nawet jeśli używasz go jako znaku kontrolnego (tj. do sterowania interfejsem użytkownika), nadal wstawia znak nowej linii, który zostanie uruchomiony keypress.

Źródło: quirksmode

Aby uzyskać kod szesnastkowy dla wszystkich znaków: http://asciitable.com/

Po prostu opublikowałem zaktualizowaną odpowiedź, która nie e.keyCodejest uznawana ZA DEPRECATED na MDN .

Zamiast tego powinieneś wybrać opcję, e.keyktóra obsługuje czyste nazwy dla wszystkiego. Oto odpowiedni kopia makaronu

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);

Solidna biblioteka JavaScript do przechwytywania danych wprowadzanych z klawiatury i kombinacji klawiszy. Nie ma zależności.

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

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

Klawisze skrótu rozumie następujących wyrażeń: ⇧, shiftoption⌥altctrlcontrolcommandi ⌘.

Następujące klawisze specjalne mogą być wykorzystywane do skrótów: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletei f1dzięki f19.

Zawsze korzystałem z keyup i e. Które złapały klawisz Escape.

Wiem, że to pytanie dotyczy jquery, ale dla osób używających jqueryui istnieją stałe dla wielu kodów:

$.ui.keyCode.ESCAPE

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