.keyCode vs. .which

Saya pikir ini akan dijawab di suatu tempat di Stack Overflow, tetapi saya tidak dapat menemukannya.

Jika saya mendengarkan acara penekanan tombol, haruskah saya menggunakan .keyCodeatau .whichuntuk menentukan apakah tombol Enter ditekan?

Saya selalu melakukan sesuatu seperti berikut:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

Tapi saya melihat contoh yang menggunakan .whichbukan .keyCode. Apa bedanya? Apakah satu browser lebih ramah silang dari yang lain?

Catatan: Jawaban di bawah ini ditulis pada tahun 2010. Di sini bertahun-tahun kemudian, keduanya keyCodedan whichsudah usang dalam mendukung key(untuk kunci logis) dan code(untuk penempatan fisik kunci). Tetapi perhatikan bahwa IE tidak mendukung code, dan dukungannya keydidasarkan pada versi spesifikasi yang lebih lama sehingga tidak cukup benar. Saat saya menulis ini, Edge saat ini berdasarkan pada EdgeHTML dan Chakra tidak mendukung codebaik, tetapi Microsoft meluncurkan pengganti untuk Blink - dan V8 berbasis untuk Edge, yang mungkin melakukan / akan.

Beberapa browser digunakan keyCode, yang lain digunakanwhich .

Jika Anda menggunakan jQuery, Anda dapat menggunakan whichjQuery sebagai standar ; Lebih lanjut di sini.

Jika Anda tidak menggunakan jQuery, Anda dapat melakukan ini:

var key = 'which' in e ? e.which : e.keyCode;

Atau sebagai alternatif:

var key = e.which || e.keyCode || 0;

... yang menangani kemungkinan yang e.whichmungkin terjadi 0(dengan mengembalikannya 0pada akhirnya, menggunakan operator JavaScript yang sangat kuat|| ).

jQuery menjadi normal event.whichtergantung pada apakah event.which, event.keyCodeatau event.charCodedidukung oleh browser:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

Manfaat tambahan .whichadalah bahwa jQuery juga melakukannya untuk klik mouse:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Jika Anda tetap menggunakan vanilla Javascript, harap dicatat keyCode sekarang sudah tidak digunakan lagi dan akan dihapus:

Fitur ini telah dihapus dari standar Web. Meskipun beberapa browser mungkin masih mendukungnya, browser ini sedang dalam proses dijatuhkan. Hindari menggunakannya dan perbarui kode yang ada jika memungkinkan; lihat tabel kompatibilitas di bagian bawah halaman ini untuk memandu keputusan Anda. Ketahuilah bahwa fitur ini dapat berhenti bekerja kapan saja

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Alih-alih gunakan: .key atau .code tergantung pada perilaku apa yang Anda inginkan: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Keduanya diimplementasikan pada browser modern.

lihat ini: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

Dalam peristiwa penekanan tombol, nilai Unicode dari tombol yang ditekan disimpan dalam properti keyCode atau charCode, tidak pernah keduanya. Jika tombol yang ditekan menghasilkan karakter (mis. 'A'), charCode diatur ke kode karakter tersebut, dengan menghormati huruf huruf. (Yaitu charCode memperhitungkan apakah tombol shift ditekan). Kalau tidak, kode tombol yang ditekan disimpan di keyCode. keyCode selalu diatur dalam peristiwa keydown dan keyup. Dalam kasus ini, charCode tidak pernah disetel. Untuk mendapatkan kode kunci terlepas dari apakah itu disimpan dalam keyCode atau charCode, kueri properti yang mana. Karakter yang dimasukkan melalui IME tidak mendaftar melalui keyCode atau charCode.

Saya akan merekomendasikan event.keysaat ini. Dokumen MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodedan event.whichkeduanya memiliki peringatan usang yang tidak menyenangkan di bagian atas halaman MDN mereka:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / yang

Untuk tombol alfanumerik, event.keytampaknya diterapkan secara identik di semua browser. Untuk tombol kontrol (tab, enter, escape, dll),event.key memiliki nilai yang sama di Chrome / FF / Safari / Opera tetapi nilai yang berbeda di IE10 / 11 / Edge (IEs tampaknya menggunakan versi spesifikasi yang lebih lama tetapi cocok satu sama lain sebagai 14 Januari 2018).

Untuk kunci alfanumerik cek akan terlihat seperti:

event.key === 'a'

Untuk karakter kontrol, Anda perlu melakukan sesuatu seperti:

event.key === 'Esc' || event.key === 'Escape'

Saya menggunakan contoh di sini untuk menguji pada beberapa browser (saya harus membuka di codepen dan mengedit agar berfungsi dengan IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ kode

event.code disebutkan dalam jawaban yang berbeda sebagai suatu kemungkinan, tetapi IE10 / 11 / Edge tidak mengimplementasikannya, jadi keluar jika Anda menginginkan dukungan IE.

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

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

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

hotkeys memahami pengubah berikut: ⇧, shift, option, ⌥, alt, ctrl, control, command, dan⌘ .

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

Di Firefox, properti keyCode tidak berfungsi pada acara onkeypress (hanya akan mengembalikan 0). Untuk solusi lintas-browser, gunakan properti yang mana bersama dengan keyCode, misalnya:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support