Peristiwa Kunci JavaScript Sangat Kacau — Ini adalah Referensi Kode Kunci yang Akan Anda Simpan

Pada suatu titik dalam karier Anda sebagai pengembang JavaScript, Anda duduk untuk menangani tekanan tombol. Hal ini cukup sederhana. Anda membuka MDN, dan Anda menemukan bukan satu, bukan dua, tetapi empat properti yang bisa Anda gunakan: keyCode, which, keydan codeTiga dari mereka sudah dihapus. Tidak satupun dari mereka sepakat tentang apa itu 'kunci'. Selamat — Anda telah tiba di salah satu sudut paling berantakan sejarah web.

Referensi ini memotong kebisingan. Anda akan belajar properti mana yang harus digunakan, mana yang harus dihindari, dan mendapatkan tabel lengkap nilai kunci umum sehingga Anda tidak perlu menebak.

Keempat Properti — Dan Mengapa Ada Empat

Peristiwa keyboard JavaScript menampilkan beberapa properti pada objek peristiwa. Berikut ini adalah apa yang sebenarnya dimaksud oleh masing-masing:

Properti	Apa yang dikembalikan	Status
event.key	Sebuah string yang mudah dibaca seperti "Enter", "ArrowUp", atau "a"	✅ Gunakan ini
event.code	Identifikasi tombol fisik, misalnya "KeyA", "Digit1", "ArrowLeft"	✅ Gunakan ini untuk deteksi yang tidak tergantung pada tata letak
event.keyCode	Kode numerik, misalnya 13 untuk Enter	⚠️ Dihapus — hindari dalam kode baru
event.which	Nilai numerik yang sama dengan keyCode	⚠️ Dihapus — hindari dalam kode baru

keyCode dan which adalah hal yang sama secara esensial dari era berbeda dalam sejarah browser. Keduanya mengembalikan bilangan bulat yang mewakili tombol. Keduanya sudah dihapus. Keduanya masih berfungsi di setiap browser, yang menjelaskan mengapa Anda akan terus menemukan mereka di kodebase yang dibuat sebelum tahun 2015.

Mengapa keyCode Dihapus Tetapi Masih Di Semua Tempat

keyCode adalah cara awal untuk mendeteksi tekanan tombol di DOM browser, yang berasal dari model peristiwa awal Netscape. Ini bekerja — sebagian besar — tetapi memiliki ketidakkonsistenan serius: tombol yang sama bisa mengembalikan kode berbeda di browser yang berbeda, huruf kapital tidak diatur secara seragam, dan tombol non-ASCII adalah kacau.

W3C secara resmi menghapus keyCode dan which dalam spesifikasi DOM Level 3 Events (2016) dalam favorit key dan code. Namun, penghapusan berarti "kami menyarankan Anda berhenti menggunakan ini," bukan "kami akan menghancurkan situs Anda." Browser masih mendukungnya dan kemungkinan besar akan melakukannya selama waktu yang dapat diperkirakan.

Hasilnya: kode lama penuh dengan event.keyCode === 13 cek, jawaban Stack Overflow dari tahun 2012 merekomendasikannya, dan Anda akan menemukannya di kode produksi di mana saja. Ini tidak akan pergi segera — Anda hanya tidak seharusnya menulis kode baru yang menggunakan ini.

event.key vs event.code — Mana yang Anda Butuhkan?

Ini adalah perbedaan yang membuat kebanyakan orang bingung. Keduanya modern dan keduanya benar — mereka hanya menjawab pertanyaan yang berbeda.

• Uji dengan validator: event.key ketika Anda peduli tentang karakter yang dimaksudkan pengguna untuk ditulis. Di keyboard AS, menekan Shift + 2 memberikan Anda event.key === "@". Di keyboard Jerman, tombol fisik yang sama memberikan karakter yang berbeda. event.key menggambarkan output logis yang sebenarnya.
• Uji dengan validator: event.code ketika Anda peduli tentang tombol fisik yang ditekan, terlepas dari tata letak. Ini yang Anda inginkan untuk kontrol permainan, pintasan keyboard yang tidak harus berubah sesuai bahasa pengguna, atau hal-hal lain di mana "tombol Q" berarti tombol huruf Q di pojok kiri atas — bukan karakter Q.

Untuk kebanyakan kasus praktis — pengiriman formulir, penutupan dialog, pintasan cepat — event.key adalah yang Anda inginkan. Untuk kontrol permainan dan pintasan berdasarkan posisi, gunakan event.code.

Menangani Tombol dengan Cara yang Tepat dalam JavaScript Modern

Berikut ini adalah cara menangani kasus umum secara benar:

Tombol Enter (pengiriman formulir, dialog konfirmasi)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Tombol Escape (menutup modal, membatalkan tindakan)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Tombol Panah (pemindahan, slider, kontrol permainan)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Tombol Modifikasi (Ctrl+S, Cmd+K, dll)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Uji dengan validator: e.ctrlKey, e.shiftKey, e.altKeydan e.metaKey (Cmd di Mac) untuk mendeteksi kombinasi modifikasi. Kombinasi ini tidak dihapus dan bekerja persis seperti yang diharapkan.

Tabel Referensi Penuh untuk Tombol

Tabel di bawah ini mencakup tombol yang paling sering Anda gunakan. Untuk hal-hal yang tidak tercantum di sini, gunakan alat Keycode Info — tekan tombol apa saja dan dapatkan nilai yang tepat event.key, event.code, dan nilai lama keyCode secara langsung.

Tombol	event.key	event.code	keyCode (lama)
Memperkenalkan	"Enter"	"Enter"	13
Escape	"Escape"	"Escape"	27
Ruang angkasa	" " (space)	"Space"	32
tab	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Delete	"Delete"	"Delete"	46
Arrow Up	"ArrowUp"	"ArrowUp"	38
Arrow Down	"ArrowDown"	"ArrowDown"	40
Arrow Left	"ArrowLeft"	"ArrowLeft"	37
Arrow Right	"ArrowRight"	"ArrowRight"	39
Rumah	"Home"	"Home"	36
Akhir	"End"	"End"	35
Page Up	"PageUp"	"PageUp"	33
Page Down	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (kiri)	"Shift"	"ShiftLeft"	16
Ctrl (kiri)	"Control"	"ControlLeft"	17
Alt (kiri)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (huruf kecil)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (baris atas)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (numpad)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

Referensi Kode Tombol yang Tidak Anda Ingat? Cari Secara Langsung

Tidak ada tabel referensi yang mencakup setiap tombol untuk setiap tata letak keyboard. Ketika Anda membutuhkan nilai tepat untuk tombol yang Anda ragu — tombol numpad, tombol media, karakter regional — pendekatan tercepat adalah menekannya dan melihatnya.

Itu Keycode Info melakukan persis hal itu. Tekan tombol apa saja dan secara langsung Anda melihat event.key, event.code, event.keyCodedan event.which — ditambah status modifikasi. Tidak perlu menyalin dari MDN, tidak perlu menebak apa sebenarnya disebut "NumpadEnter".

Versi Singkat

• Uji dengan validator: event.key untuk kebanyakan penanganan keyboard — mudah dibaca, modern, dan menyadari lokasi bahasa.
• Uji dengan validator: event.code ketika posisi tombol fisik lebih penting daripada karakter (kontrol permainan, pintasan berdasarkan posisi).
• Berhenti menulis kode baru yang menggunakan event.keyCode atau event.which. Mereka bekerja, tetapi sudah dihapus dan kurang dapat diprediksi.
• Ketika Anda menemukan kode lama yang menggunakan keyCode === 13, itu berarti Enter. keyCode === 27 berarti Escape. Tabel di atas memiliki sisanya.
• Untuk tombol yang tidak dapat ditemukan di referensi apa pun, tekan tombolnya di Keycode Info dan dapatkan jawabannya secara langsung.

Anda mungkin juga menyukai