Beberapa versi Chrome terakhir telah mendapatkan dua tambahan pada 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 seharusnya sulit menggunakan atribut lama.
Atribut kode
Yang pertama adalah atribut code. Ini disetel ke string yang mewakili tombol yang ditekan untuk menghasilkan KeyboardEvent, tanpa menggunakan tata letak keyboard saat ini (misalnya, QWERTY vs. Dvorak), lokalitas (misalnya, bahasa Inggris vs. Prancis), atau tombol pengubah apa pun.
Hal ini berguna saat Anda ingin menekan tombol fisik mana yang ditekan, bukan karakter yang sesuai dengan tombol tersebut. Misalnya, jika Anda menulis game, Anda mungkin menginginkan serangkaian tombol tertentu untuk memindahkan pemain ke berbagai arah, dan pemetaan itu idealnya harus terpisah dari tata letak keyboard.
Atribut kunci
Selanjutnya, kita memiliki atribut key baru. Parameter ini juga disetel ke string, tetapi meskipun 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 berguna saat Anda perlu mengetahui karakter apa yang akan ditampilkan di layar seolah-olah pengguna telah mengetik ke dalam input teks.
Apa artinya ini dalam praktiknya?
Untuk memberikan contoh konkret, asumsikan pengguna Anda menggunakan {i>keyboard<i} AS dengan tata letak {i>keyboard<i} 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 Prancis (AZERTY), tombol ini masih akan memiliki code dari "KeyQ" meskipun huruf yang dicetak pada keycap adalah "a".
Menekan tombol Q fisik pada keyboard AS yang sama biasanya akan menghasilkan KeyboardEvent dengan key yang 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.
Meninjau kembali contoh game kita sebelumnya, jika Anda ingin game menggunakan tombol WASD untuk gerakan, Anda dapat menggunakan atribut code dan memeriksa "KeyW", "KeyA", "KeyS", dan "KeyD". Ini akan berfungsi pada semua keyboard dan tata letak—bahkan keyboard AZERTY yang menukar posisi tombol "w" dan "z".
Keyboard virtual
Anda akan memperhatikan bahwa sampai sekarang, kita telah fokus pada perilaku yang mengasumsikan {i>keyboard<i} 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 untuk menghasilkan setelan code yang sesuai, tetapi keyboard virtual yang mengadopsi tata letak non-tradisional dapat menyebabkan code tidak disetel sama sekali.
Semuanya menjadi lebih mudah untuk atribut key, yang seharusnya Anda tetapkan ke string berdasarkan karakter yang diketikkan pengguna (secara virtual).
Cobalah
Gary Kačmarčík telah membuat demo fantastis untuk memvisualisasikan semua atribut yang terkait dengan KeyboardEvent:
Dukungan lintas browser
Dukungan untuk atribut code, sejak penulisan ini, terbatas untuk 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+.