Kode kunci untuk tombol melarikan diri dengan jQuery

Saya memiliki dua fungsi. Saat enter ditekan, fungsi berjalan dengan benar tetapi saat escape ditekan, fungsi itu tidak. Berapa nomor yang benar untuk kunci melarikan diri?

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

Coba dengan acara keyup :

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

Daripada meng-hardcode nilai kode kunci dalam fungsi Anda, pertimbangkan untuk menggunakan konstanta bernama untuk menyampaikan makna Anda dengan lebih baik:

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

Beberapa browser (seperti FireFox, tidak yakin yang lain) mendefinisikan KeyEventobjek global yang mengekspos jenis konstanta ini untuk Anda. Pertanyaan SO ini menunjukkan cara yang bagus untuk mendefinisikan objek itu di browser lain juga.

(Jawaban diambil dari komentar saya sebelumnya )

Anda perlu menggunakan keyupdaripada keypress. misalnya:

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

keypresstampaknya tidak ditangani secara konsisten di antara browser (coba demo di http://api.jquery.com/keypress di IE vs Chrome vs Firefox. Terkadang keypresstidak mendaftar, dan nilai untuk 'yang' dan ' keyCode 'bervariasi) sedangkan keyupkonsisten.

Karena ada beberapa diskusi tentang e.whichvs e.keyCode: Catatan itu e.whichadalah nilai jquery-dinormalisasi dan yang direkomendasikan untuk digunakan:

Properti event.which menormalkan event.keyCode dan event.charCode. Dianjurkan untuk menonton acara. Yang untuk input tombol keyboard.

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

Untuk menemukan kode kunci untuk tombol apa saja, gunakan fungsi sederhana ini:

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

27adalah kode untuk kunci pelarian. :)

Taruhan terbaik Anda adalah

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

Ringkasan

• whichlebih disukai daripada keyCodekarena dinormalisasi
• keyuplebih disukai daripada keydownkarena keydown dapat terjadi beberapa kali jika pengguna terus menekannya.
• Jangan gunakan keypresskecuali Anda ingin mengambil karakter yang sebenarnya.

Yang menarik, Bootstrap menggunakan keydown dan keyCode dalam komponen dropdown-nya (mulai 3.0.2)! Saya pikir itu mungkin pilihan yang buruk di sana.

Cuplikan terkait dari JQuery doc

Sementara browser menggunakan properti yang berbeda untuk menyimpan informasi ini, jQuery menormalkan properti .which sehingga Anda dapat menggunakannya dengan andal untuk mengambil kode kunci. Kode ini sesuai dengan tombol pada keyboard, termasuk kode untuk tombol khusus seperti panah. Untuk menangkap entri teks aktual, .keypress () mungkin merupakan pilihan yang lebih baik.

Item lain yang menarik: Perpustakaan JavaScript Keypress

Coba plugin jEscape ( unduh dari google drive )

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

atau dapatkan kode kunci untuk cross browser

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

mungkin Anda bisa menggunakan saklar

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

Kode Anda berfungsi dengan baik. Kemungkinan besar jendela itu tidak fokus. Saya menggunakan fungsi serupa untuk menutup kotak iframe dll.

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

});

Saya sedang mencoba melakukan hal yang sama dan itu mengganggu saya. Di firefox, tampaknya jika Anda mencoba melakukan beberapa hal ketika tombol escape ditekan, itu akan terus memproses kunci escape yang kemudian membatalkan apa pun yang Anda coba lakukan. Lansiran berfungsi dengan baik. Tetapi dalam kasus saya, saya ingin kembali ke sejarah yang tidak berhasil. Akhirnya tahu bahwa saya harus memaksa propagasi acara untuk berhenti seperti yang ditunjukkan di bawah ini ...

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

Untuk menjelaskan di mana jawaban lain belum; masalahnya adalah penggunaan Anda keypress.

Mungkin acara ini hanya salah nama tetapi keypressdidefinisikan untuk memecat kapan . Yaitu teks. Sedangkan yang Anda inginkan adalah / , yang menyala kapan saja (sebelum atau sesudah, masing-masing) . Yaitu hal-hal di keyboard.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

Perbedaannya muncul di sini karena escmerupakan karakter kontrol (secara harfiah ' karakter non-cetak') dan karenanya tidak menulis teks apa pun, sehingga bahkan tidak diaktifkan keypress.
enteraneh, karena meskipun Anda menggunakannya sebagai karakter kontrol (yaitu untuk mengontrol UI), itu masih memasukkan karakter baris baru, yang akan diaktifkan keypress.

Sumber: quirksmode

Untuk mendapatkan kode hex untuk semua karakter: http://asciitable.com/

Hanya memposting jawaban yang diperbarui dari e.keyCodeyang dianggap TERDEPAN pada MDN .

Sebaliknya Anda harus memilih e.keyyang mendukung nama bersih untuk semuanya. Ini pasta salin yang relevan

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

Pustaka Javascript yang kuat untuk mengambil input keyboard dan kombinasi tombol dimasukkan. Tidak memiliki dependensi.

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 memahami pengubah berikut: ⇧, shiftoption⌥altctrlcontrolcommand, dan ⌘.

Tombol khusus berikut dapat digunakan untuk cara pintas: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletedan f1melalui f19.

Saya selalu menggunakan keyup dan e.yang menangkap kunci melarikan diri.

Saya tahu pertanyaan ini menanyakan tentang jquery, tetapi bagi mereka yang menggunakan jqueryui, ada konstanta untuk banyak kode kunci:

$.ui.keyCode.ESCAPE

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