Pencari Keycode JavaScript

Cara kerjanya

1. Tekan tombol: klik di area input dan tekan tombol apa pun, huruf, angka, tombol fungsi, panah, modifikator, atau tombol khusus.
2. Baca kode tombol: alat seketika menampilkan nilai event.key, event.code, event.keyCode (warisan), dan charCode tombol.
3. Gunakan dalam kode Anda: salin nilai persis yang dibutuhkan untuk listener event keyboard atau implementasi shortcut Anda.

Mengapa menggunakan pencari keycode?

Event keyboard JavaScript mengekspos beberapa properti berbeda, key, code, keyCode, charCode, dan which, dan mengetahui mana yang harus digunakan dan dibandingkan dengan nilai apa selalu rumit. Pencari KeyCode menghilangkan dugaan dengan memungkinkan Anda menekan tombol dan segera melihat semua properti event-nya. Berharga untuk membangun shortcut keyboard, menangani tombol khusus, mengimplementasikan hotkey, dan men-debug listener event keyboard.

Fitur

• Semua properti event: menampilkan event.key, event.code, event.keyCode, event.which, dan event.charCode untuk setiap penekanan.
• Deteksi tombol modifikator: menunjukkan apakah Shift, Ctrl, Alt, dan Meta ditahan saat ditekan.
• Dukungan tombol khusus: berfungsi dengan tombol fungsi (F1–F12), panah, Enter, Esc, Tab, Backspace, dan semua tombol khusus lainnya.
• Riwayat tombol: menyimpan log penekanan terkini untuk membandingkan beberapa tombol.
• Salin nilai: klik nilai apa pun untuk menyalinnya langsung ke clipboard.

Pertanyaan umum

Apa perbedaan antara event.key dan event.keyCode?

event.key adalah standar modern, mengembalikan string yang dapat dibaca seperti "ArrowLeft" atau "Enter". event.keyCode adalah kode numerik warisan (sudah usang tetapi masih didukung). Gunakan event.key untuk kode baru; event.keyCode untuk mempertahankan kompatibilitas dengan browser lama.

Bagaimana cara mendeteksi Ctrl+S atau kombinasi tombol lainnya?

Kombinasi keyboard menggunakan event.key dikombinasikan dengan pemeriksaan modifikator: if (event.ctrlKey && event.key === "s"). Tekan Ctrl+S di alat ini untuk melihat semua nilai, lalu reproduksi kondisi yang sama di listener event Anda.

Mengapa beberapa tombol menampilkan keyCode yang sama?

Nilai keyCode tidak dinormalisasi dan beberapa tombol berbagi kode tergantung konteks. event.code lebih andal, mengidentifikasi posisi fisik tombol (mis. "KeyA") terlepas dari layout keyboard, sedangkan event.key mencerminkan karakter yang dihasilkan oleh tombol tersebut.

Sejarah 30 tahun event keyboard di JavaScript

Event keyboard memiliki sejarah yang terkenal kacau di DOM. Netscape Navigator 2 (1995) memperkenalkan handler asli onkeydown, onkeypress, dan onkeyup dengan properti numerik keyCode, yang tidak memiliki spesifikasi; setiap browser menemukan nilainya sendiri. Internet Explorer 4 (1997) mengimplementasikan variannya sendiri dengan event.keyCode sebagai satu-satunya properti, sementara Netscape tetap dengan event.which. DOM Level 2 Events (W3C, November 2000) menstandardisasi aliran event (capture/bubble) tetapi secara eksplisit menyingkirkan event keyboard karena vendor tidak dapat sepakat. Hasilnya: pengembang menulis kode seperti e.keyCode || e.which selama lebih dari satu dekade. DOM Level 3 Events (W3C Working Draft 2003, Rekomendasi 2018) akhirnya memperkenalkan modern event.key (karakter Unicode atau tombol bernama seperti «ArrowLeft») dan event.code (posisi tombol fisik seperti «KeyA», independen dari layout), bersama dengan men-deprecate keyCode, charCode, dan which. Spesifikasi UI Events (W3C, berlangsung) adalah rumah modern untuk pekerjaan ini. Browser menyusul secara bertahap: Chrome 51 (Mei 2016), Firefox 47 (Juni 2016), Safari 10.1 (Maret 2017) semua mengirimkan dukungan event.code. Event legacy keypress di-deprecate untuk event beforeinput dan input.

5 properti, didekode

• event.key (modern, gunakan ini). Karakter atau tombol bernama yang dihasilkan. Huruf dan digit memberi Anda karakter Unicode yang menghormati modifier dan layout (Shift+a = «A», AZERTY posisi-Q = «a»). Tombol bernama adalah string seperti «Enter», «Escape», «ArrowLeft», «F5», «Control». Didefinisikan dalam UI Events.
• event.code (modern, gunakan untuk game). Mengidentifikasi tombol fisik pada keyboard, independen dari layout atau modifier. Contoh: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Gunakan ini untuk gerakan WASD, navigasi gaya vim, dan shortcut yang harus mengabaikan layout keyboard.
• event.keyCode (deprecated). Kode numerik. 13 = Enter, 27 = Escape, 32 = Spasi, 37-40 = Panah Kiri/Atas/Kanan/Bawah, 65-90 = A-Z, 112-123 = F1-F12. Nilai tidak pernah distandarisasi, hanya menjadi konsisten antar browser melalui konvergensi. Hindari dalam kode baru.
• event.which (deprecated). Setara Netscape dari keyCode. Untuk sebagian besar karakter cetak dan tombol non-cetak, identik dengan keyCode. Polyfill lama e.keyCode || e.which menangani kasus di mana salah satu adalah 0.
• event.charCode (deprecated, hanya pada keypress). Titik kode Unicode karakter. 97 untuk «a», 65 untuk «A». Hanya dipicu pada keypress (yang sendiri deprecated). Event input dan beforeinput adalah pengganti modern.
• Boolean modifier. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Command di macOS, tombol Windows di Windows). Selalu periksa modifier secara eksplisit: e.metaKey || e.ctrlKey untuk «simpan» lintas platform (Cmd+S di Mac, Ctrl+S di Windows/Linux).
• event.location. Membedakan modifier kiri vs kanan dan numpad. 0=standar, 1=modifier kiri, 2=modifier kanan, 3=numpad. Berguna untuk membedakan Shift-kiri vs Shift-kanan untuk layout gaming.

Di mana pencarian keycode benar-benar penting

• Shortcut keyboard aplikasi. Cmd/Ctrl+S untuk simpan, Cmd/Ctrl+Z untuk undo, Cmd/Ctrl+K untuk membuka palet perintah (Slack, Linear, GitHub, Notion semua menggunakan ini sejak sekitar 2020). Selalu gunakan event.key untuk tombol yang dapat dicetak dan boolean modifier untuk meta-tombol.
• Palet perintah dan fuzzy finder. Pola Cmd+K yang dipopulerkan oleh Slack (2014) dan Linear (2019). Dengarkan shortcut buka secara global, lalu tangani navigasi ArrowUp/ArrowDown, Enter untuk memilih, Escape untuk membatalkan.
• Game browser dan pengembangan game HTML5. Phaser, Babylon.js, Three.js. Selalu gunakan event.code untuk tombol gerakan sehingga WASD bekerja pada keyboard AZERTY (di mana «W» berada di posisi «Z»). Sebastian Lague, Notch (prototipe Minecraft awal), dan game itch.io semua jatuh ke jebakan AZERTY ini.
• Pola aksesibilitas. Dialog modal membutuhkan Escape untuk menutup. Widget Combobox membutuhkan ArrowDown/ArrowUp/Enter/Escape. Tooltip perlu ditolak dengan Escape. WAI-ARIA Authoring Practices Guide mendefinisikan pola interaksi keyboard untuk setiap widget umum; event.key adalah standar untuk pemeriksaan tersebut.
• Implementasi editor teks dan editor kode. Monaco (editor VS Code di browser), CodeMirror, ProseMirror, Lexical semua memetakan event keyboard ke perintah. Mereka menggunakan event.code untuk pengikatan tombol gaya vim/emacs yang tidak bergantung pada layout.
• Peningkatan UX form. Submit dengan Enter, blur dengan Escape, maju fokus dengan Tab. Umum dalam alur checkout, bilah pencarian, bidang autocomplete.
• Hotkey ekstensi browser. Vimium, SurfingKeys, Tridactyl menyediakan navigasi keyboard untuk seluruh web. Mereka mendengarkan di tingkat dokumen dan menangani urutan tombol modal kompleks (gg = ke atas, seperti vim).

Kesalahan umum dalam menangani event keyboard

• Menggunakan keyCode di kode baru. Deprecated sejak DOM Level 3 (2018), secara historis tidak konsisten antar browser, dan rusak pada layout non-US (tombol koma memiliki keyCode 188 di US, 191 di beberapa keyboard Jerman). Gunakan event.key saja.
• Hardcoding e.key === "w" untuk gerakan game. Pada keyboard AZERTY (Prancis), tombol W fisik mengetik «z». Pemain menjangkau apa yang mereka ingat sebagai kluster WASD tetapi mendapatkan input yang salah. Gunakan event.code === "KeyW" saja, yang mengidentifikasi posisi fisik.
• Memeriksa hanya ctrlKey untuk «simpan». Di macOS, Cmd+S adalah konvensi; ctrlKey salah tetapi metaKey benar. Selalu periksa keduanya: (e.metaKey || e.ctrlKey) && e.key === "s".
• Lupa preventDefault pada shortcut yang dicadangkan browser. Membajak Cmd+S tanpa preventDefault tetap memicu Save Page As. Sama untuk Cmd+P (cetak), Ctrl+F (pencarian browser), Ctrl+N (jendela baru, tidak bisa diblokir), Ctrl+Tab (Chrome tidak akan mengizinkan). Panggil e.preventDefault() di handler.
• Mengabaikan komposisi IME. Metode input Jepang, Cina, Korea (IME) memicu event keydown saat pengguna menyusun karakter. Periksa e.isComposing atau gunakan event compositionend sebelum memicu handler shortcut Anda. Slack terkenal menggagalkan ini untuk pengguna Jepang pada 2017.
• Menggunakan event deprecated keypress. Memicu hanya untuk tombol penghasil karakter (bukan tombol panah, fungsi, dll). Deprecated; gunakan keydown untuk shortcut dan input/beforeinput untuk perubahan teks.
• Memicu shortcut pada setiap pengulangan. Menahan tombol memicu event keydown berulang kali. Untuk aksi toggle (buka palet, ganti tab), periksa e.repeat dan keluar awal untuk menghindari pendaftaran 30 perintah «buka» ketika pengguna secara tidak sengaja menahan tombol.

Pertanyaan yang lebih sering diajukan

Mengapa handler tombol saya tidak terpicu ketika pengguna memiliki keyboard non-US?

Hampir selalu karena Anda memeriksa event.key untuk karakter yang hanya ada dengan Shift pada layout itu. Pada keyboard Jerman QWERTZ, «/» adalah Shift+7 (bukan tombolnya sendiri); pada AZERTY Prancis, digit 0-9 diketik dengan Shift+baris-atas. Gunakan event.code (tombol fisik) untuk shortcut berbasis posisi, atau event.key untuk shortcut berbasis konten (di mana Anda benar-benar menginginkan karakter yang baru saja diketik pengguna).

Bagaimana saya menangani Cmd+K / Ctrl+K secara konsisten di seluruh platform?

Idiom standar: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. Di macOS, e.metaKey adalah tombol Cmd; di Windows/Linux, e.ctrlKey adalah yang diharapkan pengguna. Terima keduanya. Selalu preventDefault karena browser mengikat Cmd+K ke «fokus bilah alamat» di beberapa browser. Tambahkan !e.repeat untuk menghindari pemicuan pada tahan-tombol.

Bisakah JavaScript mendeteksi penekanan tombol global di luar halaman?

Tidak, dan ini berdasarkan desain untuk keamanan. Browser hanya memicu event keyboard untuk halaman atau elemen yang difokuskan. Ekstensi browser dapat mendengarkan dengan ruang lingkup lebih luas menggunakan API chrome.commands. Aplikasi native di Electron, Tauri, dll., dapat menggunakan hook global tingkat OS. Aplikasi perbankan dan 2FA bergantung pada isolasi ini: tab berbahaya tidak dapat melakukan keylog pada manajer kata sandi Anda.

Apa cara yang tepat untuk mendeteksi «baru ditekan» vs «sedang ditahan»?

Untuk toggle, periksa !e.repeat di handler keydown, event pertama memiliki repeat: false, event auto-repeat berikutnya memiliki repeat: true. Untuk aksi berkelanjutan (gerakan game), lacak status tombol di Set: tambah pada keydown, hapus pada keyup, lalu di loop render Anda periksa keysHeld.has("KeyW"). Ini memisahkan input dari framerate dan menangani beberapa tombol simultan (bergerak + lompat).

Apakah ada yang dikirim ke server saat saya menekan tombol di sini?

Tidak. Event tombol ditangkap secara lokal oleh JavaScript dan ditampilkan di halaman ini tanpa permintaan jaringan apa pun. Buka tab Network di DevTools, ketik; Anda akan melihat nol lalu lintas keluar. Aman untuk pengujian dalam konteks apa pun, termasuk menemukan apa yang dihasilkan kata sandi atau shortcut sensitif di keyboard Anda.