JQuery ile kaçış anahtarı için hangi anahtar kodu

İki fonksiyonum var. Enter tuşuna basıldığında işlevler doğru çalışır ancak kaçış düğmesine basıldığında çalışmaz. Çıkış anahtarı için doğru sayı nedir?

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

Keyup etkinliğini deneyin :

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

İşlevinizdeki anahtar kod değerlerini sabit kodlamak yerine, anlamınızı daha iyi iletmek için adlandırılmış sabitleri kullanmayı düşünün:

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

Bazı tarayıcılar (FireFox gibi, diğerlerinden emin KeyEventdeğilseniz) bu tür sabitleri sizin için ortaya çıkaran global bir nesne tanımlar . Bu SO sorusu , nesneyi diğer tarayıcılarda tanımlamanın güzel bir yolunu gösterir.

(Yanıt önceki yorumumdan çıkarıldı )

Bunun keyupyerine kullanmak zorundasınız keypress. Örneğin:

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

keypresstarayıcılar arasında tutarlı bir şekilde ele alınmıyor gibi görünüyor ( IE ile Chrome ve Firefox arasındaki http://api.jquery.com/keypress adresindeki demoyu deneyin . Bazen keypresskaydolmaz ve hem 'hangi' hem de ' keyCode 'değişir), oysa keyuptutarlıdır.

e.whichVs ile ilgili bir tartışma olduğundan e.keyCode: e.whichjquery normalize edilmiş değer ve kullanılması önerilen değer olduğuna dikkat edin:

Event.which özelliği event.keyCode ve event.charCode öğelerini normalleştirir. Etkinliği izlemeniz önerilir. Klavye tuşu girişi için.

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

Herhangi bir tuşun tuş kodunu bulmak için şu basit işlevi kullanın:

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

27çıkış anahtarının kodudur. :)

En iyi bahsiniz

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

özet

• whichkeyCodenormalleştirildiğinden daha fazla tercih edilir
• keyupdaha fazla tercih edilir, keydownçünkü kullanıcı basılı tutarsa ​​tuşlar birden çok kez oluşabilir.
• keypressGerçek karakterleri yakalamak istemiyorsanız kullanmayın .

İlginç bir şekilde Bootstrap, açılan bileşeninde (3.0.2 itibariyle) keydown ve keyCode kullanıyor! Bence orada muhtemelen kötü bir seçim.

JQuery doc'den ilgili snippet

Tarayıcılar bu bilgileri depolamak için farklı özellikler kullanırken, jQuery .which özelliğini normalleştirir, böylece anahtar kodunu almak için güvenilir bir şekilde kullanabilirsiniz. Bu kod, oklar gibi özel tuşların kodları da dahil olmak üzere klavyedeki bir tuşa karşılık gelir. Gerçek metin girişini yakalamak için .keypress () daha iyi bir seçim olabilir.

Diğer ilgi çekici yerler: JavaScript Keypress Library

Jescape eklentisini deneyin ( Google Drive'dan indirin )

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

veya çapraz tarayıcı için anahtar kodu alın

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

belki anahtarı kullanabilirsiniz

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

Kodunuz iyi çalışıyor. Büyük olasılıkla odaklanmamış pencere. Benzer bir işlevi iframe kutularını vb. Kapatmak için kullanıyorum.

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

});

Ben de aynı şeyi yapmaya çalışıyordum ve boktan beni rahatsız ediyordu. Firefox'ta, kaçış tuşuna basıldığında bazı şeyler yapmaya çalışırsanız, kaçış anahtarını işlemeye devam eder ve daha sonra yapmaya çalıştığınız her şeyi iptal eder. Uyarı iyi çalışıyor. Ama benim durumumda, işe yaramayan tarihe geri dönmek istedim. Sonunda, olayın yayılmasını aşağıda gösterildiği gibi durmaya zorlamak zorunda olduğumu anladım ...

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

Diğer cevapların nerede olmadığını açıklamak için; sorun sizin kullanımınızdır keypress.

Belki de olay sadece yanlış adlandırılmıştır, ancak keypressne zaman başlayacağı tanımlanmıştır . Yani metin. Oysa ne istediğinizi / , ne zaman (sırasıyla önce veya sonra) ateş . Yani klavyedeki şeyler.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

Buradaki fark escbir kontrol karakteri (kelimenin tam anlamıyla 'yazdırılmayan karakter') olduğu için görünür ve böylece herhangi bir metin yazmaz, bu nedenle ateşlenmez keypress.
entertuhaftır, çünkü bunu bir kontrol karakteri olarak kullanmanıza rağmen (yani kullanıcı arayüzünü kontrol etmek için), yine de tetiklenecek yeni bir satır karakteri ekler keypress.

Kaynak: quirksmode

Tüm karakterlerin onaltılı kodunu almak için: http://asciitable.com/

e.keyCodeMDN'de DEPRECATED olarak kabul edilenden daha güncel bir yanıt yayınlamanız yeterlidir .

Bunun e.keyyerine, her şey için temiz isimleri destekleyen hangisini tercih etmelisiniz . İşte ilgili kopya makarna

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

Girilen klavye girişini ve tuş kombinasyonlarını yakalamak için sağlam bir Javascript kütüphanesi. Bağımlılığı yoktur.

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

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

: kısayol tuşları aşağıdaki değiştiricileri anlar ⇧, shiftoption⌥altctrlcontrolcommandve ⌘.

Aşağıdaki özel tuşlar kısayollar için kullanılabilir: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteve f1içinden f19.

Ben her zaman kaçış anahtarını yakalamak için keyup ve e.

Bu sorunun jquery hakkında sorduğunu biliyorum, ancak jqueryui kullanan kişiler için birçok anahtar kod için sabitler var:

$.ui.keyCode.ESCAPE

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