Kode kunci untuk tombol melarikan diri dengan jQuery


559

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

Keypress akan mengembalikan karakter yang terhubung ke tombol (dalam huruf yang benar dll), Keyup akan mengembalikan jumlah tombol perangkat keras yang ditekan. Untuk ESC Anda ingin kode perangkat keras 27 (bukan karakter ascii 27)
Joeri


Ada trik yang sangat sederhana untuk mengetahui kode kunci mana yang Anda inginkan. Cukup buka tab baru, masukkan document.addEventListener("keydown", e => console.log(e.keyCode))ke konsol browser Anda, klik ke jendela dan tekan tombol yang Anda cari.
anarchist912

Jawaban:


926

Coba dengan acara keyup :

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

39
Ini tidak ada hubungannya dengan keyup vs penekanan tombol. Untuk menangkap ESCAPE, Anda perlu melihat e.keyCode sebagai lawan dari e.which (yang contoh ini lakukan).
dkamins

211
"Ini tidak ada hubungannya dengan keyup vs penekanan tombol" - itu tidak benar, dkamins. keypress tampaknya tidak ditangani secara konsisten di antara browser (coba demo di api.jquery.com/keypress di IE vs Chrome vs Firefox - kadang-kadang tidak mendaftar, dan 'mana' dan 'kode kunci' bervariasi) sedangkan keyup konsisten. e.yang merupakan nilai dinormalisasi jquery, jadi 'yang' atau 'keyCode' harus bekerja di keyup.
Jordan Brough

13
@Jordan Brough - Saya ingin meminta Anda untuk mengirim komentar Anda sebagai jawaban agar orang membacanya dan memahami arti sebenarnya dari komentar Anda! karena komentar Anda sama pentingnya dengan jawaban yang menjelaskan
Murtaza

15
keydownakan meniru perilaku asli - setidaknya di Windows di mana menekan ESC atau Kembali dalam dialog akan memicu tindakan sebelum kunci dilepaskan.
thomthom

2
@gibberish Saya telah menambahkan komentar saya sebagai jawaban di sini: stackoverflow.com/a/28502629/58876
Jordan Brough

77

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.


15
Apa, 27 tidak hanya melompat pada Anda sebagai kunci melarikan diri?!? Jujur, ini benar-benar perlu dilakukan oleh lebih banyak orang. Saya menyebutnya "angka ajaib" dan "string ajaib." Apa artinya 72? Mengapa Anda memiliki string copy-paste yang sangat spesifik dan volatile 300 kali di basis kode Anda? dll
vbullinger

1
Atau Anda bisa menambahkan komentar di atas masing-masing, karena Anda cenderung hanya menggunakannya satu kali. IMO sama terbaca
Ivan Durst

8
@IvanDurst Anda mungkin hanya menggunakannya sekali per metode , tapi saya menggunakannya beberapa kali dalam proyek saya. Apakah Anda benar-benar menyarankan agar Anda (1) mencari nilainya dan (2) berkomentar setiap kali Anda ingin menggunakan kode kunci? Saya tidak tahu tentang Anda, tetapi saya tidak memiliki keinginan untuk menghafal mereka atau keyakinan bahwa programmer lain akan berkomentar secara konsisten. Ini tentang membuat pengkodean lebih mudah dan lebih konsisten, bukan hanya lebih mudah dibaca.
Seth Petry-Johnson

2
Seseorang yang tahu apa maksudnya tidak harus mencari makna untuk berkomentar, dan mengetik komentar sama cepatnya dengan mengetikkan nama panjang.
NetMage

6
Apa yang terjadi pada masa lalu yang indah ketika kita menggunakan kode konstanta karakter dalam hex? Semua orang tahu ESC 0x1Bdan Enter adalah 0x0D, kan?
David R Tribble

42

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


5
Saya juga ingin menambahkan di sini bahwa browser yang tidak dapat keypressmelarikan diri melakukannya dengan benar. keypressdimaksudkan untuk menembak hanya ketika kunci menghasilkan karakter sedangkan keyupapi selalu. developer.mozilla.org/en-US/docs/Web/Events/keypress
ohcibi

26

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

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

14

27adalah kode untuk kunci pelarian. :)


1
Saya memiliki dua fungsi saat masuk adalah tekan fungsi berjalan dengan benar tetapi tidak dengan tombol keluar .. $ (dokumen) .keypress (fungsi (e) {if (e.which == 13) {$ ('. Save'). Klik ();} jika (e.which == 27) {$ ('. cancel'). klik ();}});
Shishant

$ (dokumen) .keypress (fungsi (e) {y = e.keyCode? e.keyCode: e.which;}); Ketika saya memberi tahu (y), ia memberi peringatan 27 di IE dan FF. Apakah Anda yakin tidak ada yang salah dengan kode Anda?
Salty

14

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


10

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

8

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

});

8

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

8

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


1
Kudos untuk membaca spec! Ini pasti jawaban yang diterima pasti :)
DylanYoung

7

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


2
Saya akan mengatakan ..... Saya benci bahwa situs ini berada di bagian atas hasil pencarian karena sangat jelek, tetapi tidak menyampaikan informasi yang diperlukan.
mpen

1
Perhatikan bahwa tergantung pada acara dan browser, kode kunci tidak selalu cocok dengan tabel ascii.
Alan H.

2
downvote: tidak menjawab pertanyaan, bahkan tidak menjawab pertanyaan, hex tidak ada hubungannya dengan pertanyaan dan OP sudah menunjukkan pengetahuan tentang esc == 27.
Jeremy

7

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

3
Tetapi tampaknya hanya didukung di Firefox dan Chrome.
Gayan Weerakutti


Sayangnya, setidaknya beberapa versi Internet Explorer meneruskan kode Escdaripada standar Escape.
Robin Stewart

6

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


5

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


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.