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

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?

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

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 .

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/

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

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

Dari pada

event.keyCode === 13

Lakukan seperti

event.key === 'Enter'

Kamu dapat memakai

parseInt(event.key, radix: 10)

(e)=>{
  e.key === 'Escape';
}

sama seperti

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

lebih baik menggunakan yang kedua