Beberapa versi Chrome sebelumnya telah menambahkan dua hal ke KeyboardEvent, yang digunakan sebagai parameter yang diteruskan ke pemroses peristiwa keydown, keypress, dan keyup. Atribut code (ditambahkan di Chrome 48) dan atribut key (ditambahkan di Chrome 51) memberi developer cara mudah untuk mendapatkan informasi yang sulit menggunakan atribut lama.
Atribut kode
Yang pertama adalah atribut code. Ini ditetapkan ke string yang mewakili tombol yang ditekan untuk menghasilkan KeyboardEvent, tanpa mempertimbangkan tata letak keyboard saat ini (misalnya, QWERTY vs. Dvorak), lokalitas (misalnya, Inggris vs. Prancis), atau tombol pengubah apa pun.
Hal ini berguna jika Anda ingin mengetahui tombol fisik mana yang ditekan, bukan karakter yang sesuai dengan tombol tersebut. Misalnya, jika Anda menulis game, Anda mungkin ingin serangkaian tombol tertentu untuk memindahkan pemain ke arah yang berbeda, dan pemetaan tersebut idealnya tidak bergantung pada tata letak keyboard.
Atribut utama
Selanjutnya, kita memiliki atribut key baru. Ini juga ditetapkan ke string, tetapi saat code menampilkan informasi tentang tombol fisik yang ditekan, key berisi karakter yang dihasilkan oleh tombol tersebut, dengan mempertimbangkan tata letak keyboard, lokalitas, dan tombol pengubah saat ini.
Melihat nilai atribut key akan berguna saat Anda perlu mengetahui karakter apa yang akan ditampilkan di layar seolah-olah pengguna telah mengetik ke input teks.
Bagaimana praktiknya?
Untuk memberikan contoh konkret, mari kita asumsikan pengguna Anda menggunakan keyboard Amerika Serikat dengan tata letak keyboard QWERTY. Menekan tombol Q fisik pada keyboard tersebut akan menghasilkan KeyboardEvent dengan atribut code yang disetel ke "KeyQ". Hal ini berlaku terlepas dari tata letak keyboard, dan terlepas dari tombol pengubah lainnya. Sebagai perbandingan, pada keyboard bahasa Prancis (AZERTY), tombol ini masih akan memiliki code "KeyQ" meskipun huruf yang dicetak pada tombol adalah "a".
Menekan tombol Q fisik pada keyboard Amerika Serikat yang sama biasanya akan menghasilkan KeyboardEvent dengan key disetel ke "q" (tanpa tombol pengubah), atau "Q" (dengan Shift atau CapsLock), atau "œ" (di OS X, dengan Alt). Pada keyboard AZERTY Prancis, tombol yang sama ini akan menghasilkan "a" (atau "A" dengan Shift atau CapsLock). Dan untuk tata letak keyboard lainnya, nilai key dapat berupa "й", "ض", "ㅂ", "た", atau beberapa karakter lainnya.
Melihat kembali contoh game kita sebelumnya, jika ingin game menggunakan tombol WASD untuk gerakan, Anda dapat menggunakan atribut code dan memeriksa "KeyW", "KeyA", "KeyS", dan "KeyD". Tindakan ini akan berfungsi untuk semua keyboard dan semua tata letak—bahkan keyboard AZERTY yang menukar posisi tombol "w" dan "z".
Keyboard virtual
Anda akan melihat bahwa hingga saat ini, kita telah berfokus pada perilaku yang mengasumsikan keyboard fisik. Bagaimana dengan pengguna yang mengetik di keyboard virtual atau perangkat input alternatif? Spesifikasi menawarkan panduan resmi untuk atribut code. Singkatnya, keyboard virtual yang meniru tata letak keyboard standar diharapkan akan menghasilkan atribut code yang sesuai, tetapi keyboard virtual yang mengadopsi tata letak non-tradisional dapat menyebabkan code tidak ditetapkan sama sekali.
Hal-hal menjadi lebih mudah untuk atribut key, yang akan ditetapkan ke string berdasarkan karakter yang diketik pengguna (secara virtual).
Cobalah
Gary Kačmarčík telah membuat demo yang fantastis untuk memvisualisasikan semua atribut yang terkait dengan KeyboardEvent:
Dukungan lintas browser
Dukungan untuk atribut code, saat penulisan ini, terbatas pada Chrome 48+, Opera 35+, dan Firefox 44+.
Atribut key didukung di Firefox 44+, Chrome 51+, dan Opera 38+, dengan dukungan sebagian di Internet Explorer 9+ dan Edge 13+.