KeyboardEvent.keyCode tidak digunakan lagi. Apa artinya ini dalam praktik?

114

Menurut MDN, sebaiknya kita tidak menggunakan .keyCodeproperti 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 .keyCodedisediakan untuk kompatibilitas saja dan bahwa versi terbaru Spesifikasi Peristiwa DOM merekomendasikan untuk menggunakan .keyproperti sebagai gantinya.

Masalahnya adalah .keytidak didukung oleh browser, jadi apa yang harus kita gunakan? Apakah ada sesuatu yang saya lewatkan?

javascript  key  deprecated  keycode 
— Jason210
sumber
3
.keydidukung di setiap pengembang
— utama.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

Jawaban:

39

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);
};
— Miguel Lattuada
sumber
16
Saya memang membaca itu tetapi tampaknya ada banyak kode tambahan tanpa alasan lain selain MDN yang mengatakan ada sesuatu yang tidak digunakan lagi, padahal sebenarnya berfungsi dengan baik di semua browser utama. Tetapi jika itu cara yang benar maka terima kasih!
— Jason210
3
Wow lihat ini. caniuse.com/#search=keyCode (Properti KeyboardEvent ini didukung secara efektif di semua browser (sejak IE6 +, Firefox 2+, Chrome 1+, dll. "berbicara tentang .keyCode)
— Miguel Lattuada
3
Itulah yang sangat mengganggu tentang semua ini. Semua browser utama mendukung keyCode, tetapi coba lakukan pemeriksaan untuk properti .key, yang direkomendasikan, dan hampir tidak ada yang menggunakannya!
— Jason210
4
Ya, kami sampai akhir Mei 2016, dan chrome akhirnya menerapkan properti KeyboardEvent.key. Safari bersama dengan setiap browser seluler belum bergabung dengan pesta "16,5% dari semua pengguna". Selain itu, sayangnya, Microsoft Edge dan Gecko menyandikan cukup banyak peristiwa secara berbeda misalnya: peristiwa kunci untuk panah atas dikodekan sebagai "Naik", bukan "Panah Atas".
— Joshua Dawson
2
Tetapi event.keyapakah itu string, sedangkan event.keyCodeangka, bukan? Mengingat bahwa mereka bahkan tidak memiliki tipe yang sama, apakah mereka dapat memiliki semantik yang sama? Atau maksud Anda event.code?
— bluenote10
28

Selain itu, semua keyCode , yaitu , charCode , dan keyIdentifier sudah tidak digunakan lagi:
charCodedan keyIdentifiermerupakan fitur non-standar.
keyIdentifierdihapus pada Chrome 54 dan Opera 41.0 menampilkan
keyCode0, saat tombol ditekan dengan karakter normal di FF.

Properti kunci :

 readonly attribute DOMString key

Menyimpan nilai atribut kunci yang sesuai dengan tombol yang ditekan

Pada saat penulisan ini, keyproperti 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 lanjut
Jika itu penting dan / atau kompatibilitas ke belakang, maka Anda dapat menggunakan fitur deteksi seperti pada kode berikut:

Perhatikan bahwa keynilainya berbeda dari keyCodeor whichproperties karena: ini berisi nama kunci bukan kodenya. Jika program Anda membutuhkan kode karakter, maka Anda dapat memanfaatkan charCodeAt(). Untuk karakter tunggal yang dapat dicetak, Anda dapat menggunakan charCodeAt(), 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 mereka charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... dan seterusnya, silakan lihat di Nilai Key dan mereka kode yang sesuai

if(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: dokumenKeyboardEvent.code properti dan beberapa detail lainnya dalam jawaban ini .

— pengguna10089632
sumber
Solusi Anda tidak berfungsi di browser saya (Windows 10, Chrome 60, keyboard Belgia). Pertama-tama, charCodeArrfungsinya tidak ada. Selain itu, charCodeAttidak berfungsi untuk semua nilai e.key. Misalnya, untuk kunci Enter/ Return, nilai e.keypropertinya adalah "Enter", dan mengeksekusi charCodeArruntuk string itu mengembalikan nilai 69(yang merupakan kode ASCII untuk karakter tersebut E).
— John Slegers
@ JohnSlegers, ya itu salah ketik, maksud saya array yang dibangun pengguna. Silakan, lihat jawaban saya yang diperbarui untuk lebih jelasnya.
— user10089632
24

TLDR: Saya akan menyarankan bahwa Anda harus menggunakan baru event.keydan event.codesifat 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 keyCodemenjadi lebih jelas:

Masalah dengan penggunaan keyCodeadalah 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 kasus

Jika Anda membaca spesifikasi W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

Dalam praktiknya, keyCode dan charCode tidak konsisten di seluruh platform dan bahkan implementasinya sama pada sistem operasi yang berbeda atau menggunakan pelokalan yang berbeda.

Ini menjelaskan secara mendalam apa yang salah dengan keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Fitur ini tidak pernah ditentukan secara resmi dan penerapan browser saat ini bervariasi secara signifikan. Jumlah besar konten lama, termasuk pustaka skrip, yang bergantung pada pendeteksian agen pengguna dan bertindak sesuai berarti bahwa setiap upaya untuk memformalkan atribut dan peristiwa lama ini akan berisiko merusak konten sebanyak yang akan diperbaiki atau diaktifkan. Selain itu, atribut ini tidak sesuai untuk penggunaan internasional, juga tidak menangani masalah aksesibilitas.

Jadi, setelah menetapkan alasan mengapa keyCode lama diganti, mari kita lihat apa yang perlu Anda lakukan hari ini:

  1. Semua browser modern mendukung properti baru ( keydan code).
  2. IE dan Edge mendukung versi spesifikasi yang lebih lama, yang memiliki nama berbeda untuk beberapa kunci. Anda dapat menggunakan shim untuk itu: https://github.com/shvaikalesh/shim-keyboard-event-key (atau gulung sendiri - lagipula agak kecil)
  3. Edge telah memperbaiki bug ini di rilis terbaru (mungkin akan dirilis pada Apr 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
  4. Lihat daftar kunci acara yang dapat Anda gunakan: https://www.w3.org/TR/uievents-key/
— kumarharsh
sumber
Menurut MDN , baik Internet Explorer maupun Edge tidak mendukungKeyboardEvent.code. Selain itu, nilai untukkeydancodebergantung pada browser. Baik pembuatan masalahkeydancodetidak praktis untuk digunakan dalam aplikasi kehidupan nyata.
— John Slegers
— kumarharsh
Jika saya ingin menguji tombol panah, halaman atas / bawah, beranda & akhir, haruskah saya menggunakan keyatau code? Ini umumnya kunci fisik, tetapi dapat bergantung pada Num Lock dan tata letak juga ... Apa praktik terbaiknya?
— Jake
16

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);
— Vicky Gonsalves
sumber
3
Sayangnya, keynilai 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.
— John Slegers
13

Misalnya jika Anda ingin mendeteksi apakah tombol "Enter" diklik atau tidak:

Dari pada

event.keyCode === 13

Lakukan seperti

event.key === 'Enter'
— Thomas Gotwig
sumber
2
Dalam terang bagian "dalam praktik" dari pertanyaan, ini harus menjadi jawaban yang diterima.
— Eduardo Pignatelli
-1

Kamu dapat memakai

parseInt(event.key, radix: 10)
— mhdizmn
sumber
2
Harap jangan hanya memposting kode sebagai jawaban, tetapi juga berikan penjelasan tentang fungsi kode Anda dan bagaimana kode tersebut menyelesaikan masalah pertanyaan. Jawaban dengan penjelasan biasanya lebih membantu dan berkualitas lebih baik, dan lebih cenderung menarik suara positif
— Ran Marciano
-1 
(e)=>{
  e.key === 'Escape';
}

sama seperti

(e)=>{
  e.keyCode === 27;
}

lebih baik menggunakan yang kedua

— Ayush Bali
sumber
Itu tidak menjawab pertanyaan itu. Mengapa lebih baik digunakan keyCode? Sudahkah Anda memeriksa salah satu jawaban yang diberi suara positif?
— Zsolt Meszaros
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.