Menurut MDN, sebaiknya kita tidak menggunakan .keyCode
properti itu. Itu tidak digunakan lagi:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Di sekolah W3, fakta ini dikecilkan dan hanya ada catatan tambahan yang mengatakan bahwa .keyCode
disediakan untuk kompatibilitas saja dan bahwa versi terbaru Spesifikasi Peristiwa DOM merekomendasikan untuk menggunakan .key
properti sebagai gantinya.
Masalahnya adalah .key
tidak didukung oleh browser, jadi apa yang harus kita gunakan? Apakah ada sesuatu yang saya lewatkan?
javascript
key
deprecated
keycode
Jason210
sumber
sumber
.key
didukung di setiap pengembangJawaban:
Anda memiliki tiga cara untuk menanganinya, seperti yang tertulis di tautan yang Anda bagikan.
if (event.key !== undefined) { } else if (event.keyIdentifier !== undefined) { } else if (event.keyCode !== undefined) { }
Anda harus merenungkannya, itulah cara yang tepat jika Anda menginginkan dukungan lintas browser.
Bisa lebih mudah jika Anda menerapkan sesuatu seperti ini.
var dispatchForCode = function(event, callback) { var code; if (event.key !== undefined) { code = event.key; } else if (event.keyIdentifier !== undefined) { code = event.keyIdentifier; } else if (event.keyCode !== undefined) { code = event.keyCode; } callback(code); };
sumber
event.key
apakah itu string, sedangkanevent.keyCode
angka, bukan? Mengingat bahwa mereka bahkan tidak memiliki tipe yang sama, apakah mereka dapat memiliki semantik yang sama? Atau maksud Andaevent.code
?Selain itu, semua keyCode , yaitu , charCode , dan keyIdentifier sudah tidak digunakan lagi:
charCode
dankeyIdentifier
merupakan fitur non-standar.keyIdentifier
dihapus pada Chrome 54 dan Opera 41.0 menampilkankeyCode
0, saat tombol ditekan dengan karakter normal di FF.Properti kunci :
Pada saat penulisan ini,
key
properti ini didukung oleh semua browser utama seperti: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Kecuali Internet Explorer 11 yang memiliki: pengidentifikasi kunci non-standar dan perilaku yang salah dengan AltGraph. Info lebih lanjutJika itu penting dan / atau kompatibilitas ke belakang, maka Anda dapat menggunakan fitur deteksi seperti pada kode berikut:
Perhatikan bahwa
key
nilainya berbeda darikeyCode
orwhich
properties karena: ini berisi nama kunci bukan kodenya. Jika program Anda membutuhkan kode karakter, maka Anda dapat memanfaatkancharCodeAt()
. Untuk karakter tunggal yang dapat dicetak, Anda dapat menggunakancharCodeAt()
, jika Anda berurusan dengan kunci yang nilainya berisi beberapa karakter seperti ArrowUp kemungkinan: Anda menguji kunci khusus dan mengambil tindakan yang sesuai. Jadi cobalah menerapkan tabel nilai kunci dan kode yang sesuai merekacharCodeArr["ArrowUp"]=38
,charCodeArr["Enter"]=13
,charCodeArr[Escape]=27
... dan seterusnya, silakan lihat di Nilai Key dan mereka kode yang sesuaiif(e.key!=undefined){ var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0); }else{ /* As @Leonid suggeted */ var characterCode = e.which || e.charCode || e.keyCode || 0; } /* ... code making use of characterCode variable */
Mungkin Anda ingin mempertimbangkan kompatibilitas ke depan, yaitu menggunakan properti lama saat tersedia, dan hanya jika dilepaskan, alihkan ke yang baru:
if(e.which || e.charCode || e.keyCode ){ var characterCode = e.which || e.charCode || e.keyCode; }else if (e.key!=undefined){ var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0); }else{ var characterCode = 0; }
Lihat juga: dokumen
KeyboardEvent.code
properti dan beberapa detail lainnya dalam jawaban ini .sumber
charCodeArr
fungsinya tidak ada. Selain itu,charCodeAt
tidak berfungsi untuk semua nilaie.key
. Misalnya, untuk kunciEnter
/Return
, nilaie.key
propertinya adalah"Enter"
, dan mengeksekusicharCodeArr
untuk string itu mengembalikan nilai69
(yang merupakan kode ASCII untuk karakter tersebutE
).TLDR: Saya akan menyarankan bahwa Anda harus menggunakan baru
event.key
danevent.code
sifat bukan yang warisan. IE dan Edge memiliki dukungan untuk properti ini, tetapi belum mendukung nama kunci baru. Untuk mereka, ada polyfill kecil yang membuat mereka mengeluarkan nama kunci / kode standar:https://github.com/shvaikalesh/shim-keyboard-event-key
Saya sampai pada pertanyaan ini mencari alasan peringatan MDN yang sama dengan OP. Setelah mencari lebih banyak lagi, masalah dengan
keyCode
menjadi lebih jelas:Masalah dengan penggunaan
keyCode
adalah bahwa keyboard non-Inggris dapat menghasilkan keluaran yang berbeda dan bahkan keyboard dengan tata letak yang berbeda dapat menghasilkan hasil yang tidak konsisten. Ditambah lagi, ada kasusJika Anda membaca spesifikasi W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent
Ini menjelaskan secara mendalam apa yang salah dengan
keyCode
: https://www.w3.org/TR/uievents/#legacy-key-attributesJadi, setelah menetapkan alasan mengapa keyCode lama diganti, mari kita lihat apa yang perlu Anda lakukan hari ini:
key
dancode
).sumber
KeyboardEvent.code
. Selain itu, nilai untukkey
dancode
bergantung pada browser. Baik pembuatan masalahkey
dancode
tidak praktis untuk digunakan dalam aplikasi kehidupan nyata.key
ataucode
? Ini umumnya kunci fisik, tetapi dapat bergantung pada Num Lock dan tata letak juga ... Apa praktik terbaiknya?MDN telah memberikan solusi:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
window.addEventListener("keydown", function (event) { if (event.defaultPrevented) { return; // Should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // Handle the event with KeyboardEvent.key and set handled true. } else if (event.keyIdentifier !== undefined) { // Handle the event with KeyboardEvent.keyIdentifier and set handled true. } else if (event.keyCode !== undefined) { // Handle the event with KeyboardEvent.keyCode and set handled true. } if (handled) { // Suppress "double action" if event handled event.preventDefault(); } }, true);
sumber
key
nilai string khusus browser seperti"Enter"
atau"ArrowUp"
dan tidak ada cara standar untuk mengubahnya menjadi kode yang sesuai. jadi Anda akan membutuhkan lebih banyak kode boilerplate untuk mengonversi antara kunci & kode.Misalnya jika Anda ingin mendeteksi apakah tombol "Enter" diklik atau tidak:
Dari pada
event.keyCode === 13
Lakukan seperti
event.key === 'Enter'
sumber
Kamu dapat memakai
parseInt(event.key, radix: 10)
sumber
(e)=>{ e.key === 'Escape'; }
sama seperti
(e)=>{ e.keyCode === 27; }
lebih baik menggunakan yang kedua
sumber
keyCode
? Sudahkah Anda memeriksa salah satu jawaban yang diberi suara positif?