Visualizer Kode Tombol Keyboard Online. KeyCode Inspector

Alat online gratis untuk melihat event.key, event.code, event.which, dan lokasi setiap tombol keyboard secara real time. Menghasilkan cuplikan kode JavaScript siap pakai.

Tekan sebuah tombol

Tombol apa saja pada keyboard Anda untuk melihat kodenya

Studio Utilitas

Ingin utilitas ini di situs Anda?

Sesuaikan warna dan mode gelap untuk WordPress, Notion, atau situs Anda sendiri.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara event.key dan event.code?

event.code mewakili tombol fisik pada keyboard, terlepas dari bahasa yang dikonfigurasi. event.key mewakili karakter yang dihasilkan, yang dapat berubah jika Anda menekan Shift atau menggunakan bahasa lain. Gunakan code untuk kontrol game; gunakan key untuk input teks dan pintasan keyboard semantik.

Apa itu event.which dan mengapa dianggap usang?

event.which adalah properti lama yang mengembalikan kode ASCII numerik untuk tombol yang ditekan. Properti ini ditandai sebagai usang (deprecated) dalam standar modern karena event.key dan event.code menggantikannya dengan informasi yang lebih tepat dan mudah dibaca. Properti ini ditampilkan dalam alat ini untuk keperluan edukasi.

Apa arti properti location?

Properti location menunjukkan di mana tombol berada secara fisik pada keyboard: Standard (posisi normal), Left (tombol modifier kiri), Right (tombol modifier kanan), atau Numpad (papan angka). Properti ini berguna untuk membedakan tombol CTRL kiri dan kanan, misalnya.

Apakah berfungsi dengan keyboard internasional dan tata letak non-QWERTY?

Ya. Alat ini menampilkan tepat apa yang dilaporkan browser untuk konfigurasi keyboard Anda. event.code selalu mengembalikan nama QWERTY dari posisi fisik, sedangkan event.key menampilkan karakter aktual sesuai bahasa Anda.

# Memahami event keyboard di JavaScript

Saat pengguna menekan tombol, browser memicu tiga event: keydown, keypress, dan keyup. Masing-masing mengekspos properti dengan informasi tentang tombol yang ditekan, tetapi tidak semuanya setara atau direkomendasikan.

# Properti event tombol keyboard

event.code — Tombol fisik

Mengembalikan pengenal posisi fisik tombol pada keyboard, menggunakan nomenklatur QWERTY. Misalnya, tombol "A" pada keyboard AZERTY mengembalikan KeyQ. Ideal untuk kontrol game di mana posisi yang penting, bukan karakter.

event.key — Karakter yang dihasilkan

Mengembalikan nilai karakter yang dihasilkan berdasarkan bahasa dan modifier aktif. Menekan Shift+A mengembalikan "A"; tanpa Shift mengembalikan "a". Untuk tombol khusus, mengembalikan nama seperti "Enter", "Escape", "ArrowUp".

# Kapan menggunakan setiap properti

Gunakan event.code untuk kontrol game (WASD terlepas dari bahasa) dan event.key untuk mendeteksi karakter tertentu atau pintasan keyboard semantik seperti Ctrl+C.
Properti event.which dan event.keyCode secara resmi telah usang menurut standar W3C. Meskipun browser modern masih mendukungnya untuk kompatibilitas, keduanya sebaiknya tidak digunakan pada kode baru.

Referencias Bibliográficas