Pencari KeyCode JavaScript
Tekan tombol apa pun untuk mendapatkan nilai keyCode, key, code, dan which
Penangkap papan ketik
Fokus di sini lalu tekan tombol
Peristiwa papan ketik hanya ditangkap di dalam area ini. Tab mencatat tombol lalu memindahkan fokus ke kontrol berikutnya.
Untuk peristiwa papan ketik yang lengkap, gunakan papan ketik fisik. Papan ketik di ponsel mungkin tidak menyertakan beberapa properti.
Penekanan tombol terbaru
10 penekanan tombol terakhir Anda akan muncul di sini.
Detail peristiwa papan ketik
event.keyevent.codeevent.keyCodeUsangevent.whichUsangevent.locationevent.repeatTombol pengubah
Fokuskan area penangkap untuk memeriksa peristiwa papan ketik.
Tentang Pencari KeyCode JavaScript
Alat Pencari KeyCode JavaScript adalah alat developer interaktif gratis yang langsung menampilkan setiap properti event keyboard saat Anda menekan tombol apa pun. Baik Anda sedang membuat pintasan keyboard, kontrol game, maupun navigasi yang aksesibel, mengetahui nilai pasti event.key, event.code, event.keyCode, dan event.which sangat penting untuk menulis JavaScript yang andal di berbagai browser.
Aplikasi web modern sangat bergantung pada penanganan event keyboard untuk berbagai keperluan, mulai dari validasi formulir hingga alat kolaborasi real-time. Utilitas pencarian keycode ini menghilangkan tebak-tebakan dengan menampilkan kode tombol fisik, nilai tombol logis, penanda lokasi, dan semua status modifier (Shift, Ctrl, Alt, Meta) begitu tombol ditekan, langsung di browser Anda tanpa pengaturan apa pun.
Berbeda dengan tabel referensi keycode statis, penguji event tombol JavaScript secara langsung ini menangkap event browser yang sebenarnya sehingga Anda dapat memverifikasi perilaku di berbagai sistem operasi dan tata letak keyboard. Alat ini juga menandai dengan jelas properti mana yang sudah usang, sehingga Anda dapat menulis kode yang siap menghadapi masa depan dan mengikuti standar W3C Keyboard Event terbaru.
Fitur utama
- Tampilan real-time
event.key,event.code,event.keyCode,event.which, danevent.location - Indikator visual tombol modifier yang menampilkan status Shift, Ctrl, Alt, dan Meta
- Lencana usang pada properti lama seperti keyCode dan which
- Salin sekali klik untuk nilai properti event mana pun
- Ekspor semua data tombol sebagai objek JSON yang terformat
- Tabel riwayat yang mencatat 10 penekanan tombol terakhir Anda untuk perbandingan
- Membedakan lokasi tombol kiri, kanan, dan numpad secara otomatis
- Tampilan visual tombol keyboard agar mudah dikenali
- Berfungsi dengan semua tombol, termasuk tombol fungsi, panah, dan karakter khusus
- Desain sepenuhnya responsif dengan dukungan mode gelap
Cara menggunakan Pencari KeyCode JavaScript
- Fokuskan area input: Klik di mana saja di dalam zona penekanan tombol bergaris putus-putus di bagian atas alat untuk mengaktifkan pendengar keyboard.
- Tekan tombol apa pun: Tekan tombol mana pun di keyboard Anda dan semua properti event akan langsung muncul di kisi properti di bawahnya.
- Periksa status modifier: Lihat indikator Shift, Ctrl, Alt, dan Meta untuk mengetahui modifier mana yang aktif saat tombol ditekan.
- Salin nilai: Klik ikon salin di samping properti mana pun untuk menyalin nilainya, atau gunakan tombol "Salin Semua sebagai JSON" untuk mengekspor semua properti sekaligus.
- Bandingkan tombol: Tekan beberapa tombol secara berurutan lalu gulir ke tabel riwayat untuk membandingkan kodenya secara berdampingan.
- Bersihkan dan ulangi: Tekan tombol Bersihkan untuk mereset semua data dan memulai sesi pengujian baru.
Kasus penggunaan
- Pengembangan pintasan keyboard: Tentukan nilai key dan code yang tepat untuk menerapkan pintasan kustom di aplikasi web.
- Kontrol game: Petakan tombol fisik ke aksi game dengan memeriksa event.code untuk tombol pintas yang tidak bergantung pada tata letak.
- Pengujian aksesibilitas: Pastikan navigasi keyboard berfungsi dengan benar dan semua elemen interaktif merespons tombol yang diharapkan.
- Migrasi kode lama: Temukan padanan event.key modern untuk nilai event.keyCode yang sudah usang di proyek lama.
- Debugging lintas browser: Pastikan event tombol menghasilkan nilai yang konsisten di Chrome, Firefox, Safari, dan Edge.
- Validasi formulir input: Tentukan nilai tombol yang tepat untuk mengizinkan atau memblokir karakter tertentu di kolom teks.
- Penulisan tutorial & dokumentasi: Cari data keycode yang akurat dengan cepat untuk disertakan dalam panduan developer dan materi referensi.
- Pembedaan numpad dan keyboard utama: Gunakan properti location untuk membedakan tombol angka numpad dari tombol angka standar.
Pertanyaan yang sering diajukan
Apa perbedaan antara event.key dan event.code?
event.key mengembalikan nilai logis tombol (misalnya "a" atau "A" tergantung Shift), sedangkan event.code mengembalikan tombol fisik di keyboard (misalnya "KeyA") terlepas dari modifier atau tata letak keyboard. Gunakan event.key untuk input karakter dan event.code untuk pintasan berbasis posisi.
Apakah event.keyCode masih aman digunakan?
event.keyCode resmi dinyatakan usang oleh W3C dan dapat berperilaku tidak konsisten di berbagai browser. Untuk proyek baru, gunakan event.key atau event.code. Namun, banyak basis kode lama masih mengandalkan keyCode, sehingga alat ini menampilkannya sebagai referensi kompatibilitas mundur.
Mengapa kolom location penting?
Properti event.location membedakan tombol yang muncul di beberapa tempat pada keyboard, seperti Shift Kiri dan Shift Kanan, atau deretan angka dan numpad. Hal ini penting bagi aplikasi yang perlu membedakan tombol ganda.
Apakah alat ini gratis?
Ya, Pencari KeyCode JavaScript sepenuhnya gratis tanpa pendaftaran, tanpa batas penggunaan, dan tanpa biaya tersembunyi. Anda dapat memakainya sesering yang Anda perlukan untuk pengembangan dan pengujian.
Apakah data saya aman?
Tentu. Seluruh deteksi tombol berlangsung sepenuhnya di browser Anda menggunakan event keyboard JavaScript bawaan. Tidak ada ketukan tombol atau data event yang dikirim ke server. Input Anda tetap sepenuhnya privat di perangkat Anda.
Apakah alat ini berfungsi di perangkat seluler?
Alat ini bekerja paling baik dengan keyboard fisik. Di perangkat seluler, keyboard layar mungkin tidak memicu semua properti event secara konsisten. Untuk hasil yang andal, gunakan komputer desktop atau laptop, atau sambungkan keyboard eksternal ke perangkat seluler Anda.
Tips & praktik terbaik
- Utamakan event.key untuk input karakter: Properti ini otomatis memperhitungkan tata letak keyboard, bahasa, dan status modifier.
- Gunakan event.code untuk kontrol game: Posisi tombol fisik tetap konsisten terlepas dari tata letak keyboard pengguna (QWERTY, AZERTY, Dvorak).
- Selalu uji kombinasi modifier: Tekan Ctrl+Shift+Tombol atau Alt+Tombol untuk memastikan pendengar pintasan Anda menangkap kombinasi yang benar.
- Periksa tabel riwayat untuk menemukan pola: Membandingkan beberapa penekanan tombol membantu Anda melihat ketidakkonsistenan atau menemukan kode yang tepat lebih cepat.
- Ekspor JSON untuk dokumentasi: Gunakan fitur "Salin Semua sebagai JSON" untuk menempelkan data tombol yang akurat langsung ke komentar kode atau dokumentasi developer Anda.
- Uji di berbagai browser: Nilai event tombol dapat berbeda antar browser, terutama untuk tombol khusus. Selalu verifikasi browser target Anda.