Utilia
Kategori ▾
Bahasa: id ▾

Pencari Kode Tombol Keyboard

Tekan tombol apa saja untuk melihat nilai event.key, event.code, keyCode, which, dan location di JavaScript, lengkap dengan modifier dan tabel keycode.

Tekan “Mulai tangkap tombol” atau klik kotak di bawah, lalu tekan tombol apa saja. Klik di luar kotak untuk mengembalikan keyboard ke halaman.

event.key Tekan sebuah tombol keyCode – Tab, tombol panah, dan shortcut juga ditangkap di sini.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Tombol lock aktif
–
Modifier
ctrlKey shiftKey altKey metaKey
Riwayat tombol (terbaru di atas)
Riwayat tombol (terbaru di atas)
EventkeycodekeyCodelocationModifierrepeat
Referensi kode tombol (US QWERTY)

Referensi kode tombol (US QWERTY)
keycodekeyCodelocationCatatan

nilai key berlaku untuk layout US tanpa modifier; layout lain menghasilkan karakter lain untuk code yang sama. keyCode dan which sudah usang (deprecated), tetapi masih banyak dipakai.

Cara mencari kode tombol

  1. Tekan Mulai tangkap tombol, atau klik kotak besar. Bingkai berwarna menandakan kotak sedang mendengarkan.
  2. Tekan tombol atau shortcut apa saja. Tampilan besar menunjukkan nilai key dan keyCode lama, sedangkan kartu di bawahnya menampilkan event.key, event.code, event.keyCode, event.which, event.location, event.repeat, serta Tombol lock aktif (Caps Lock, Num Lock, AltGraph).
  3. Lencana Modifier menyala untuk ctrlKey, shiftKey, altKey, dan metaKey.
  4. Salin Cuplikan JavaScript untuk tombol ini. Gunakan Cocokkan dengan untuk memilih antara event.key, event.code, atau event.keyCode (lama).
  5. Gulir Riwayat tombol (terbaru di atas) untuk membandingkan beberapa penekanan. Centang Catat juga event keyup untuk melihat saat tombol dilepas.
  6. Telusuri atau filter tabel Referensi kode tombol (US QWERTY) jika Anda memerlukan sebuah nilai tanpa menekan tombolnya.

Selama kotak aktif, aksi bawaan setiap tombol diblokir, sehingga Tab, tombol panah, Backspace, atau Ctrl+S ditangkap alih-alih memindahkan fokus atau membuka dialog. Klik di mana saja di luar kotak untuk mengembalikan keyboard ke halaman. Beberapa shortcut ditangani sistem operasi sebelum browser melihatnya (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, sering juga Print Screen), sehingga tidak ada halaman web yang bisa membacanya.

key, code, atau keyCode: mana yang sebaiknya dipakai?

Sebuah KeyboardEvent membawa beberapa nilai yang menjawab pertanyaan berbeda:

Properti Apa yang ditunjukkannya Contoh (tombol A pada AZERTY)
key Karakter atau nama tombol yang dihasilkan, setelah layout dan modifier diterapkan "a", "A" dengan Shift
code Posisi fisik tombol, tidak bergantung pada layout "KeyQ"
keyCode / which Angka lama, biasanya kode ASCII huruf kapital 65
location 0 standar, 1 kiri, 2 kanan, 3 keypad numerik 0

Gunakan key saat maknanya yang penting: Enter untuk mengirim, Escape untuk menutup, “?” untuk membuka panel bantuan. Gunakan code untuk game dan shortcut yang bergantung pada posisi tombol, seperti gerakan WASD, yang seharusnya tetap di tempat yang sama pada keyboard AZERTY Prancis atau QWERTZ Jerman. Hindari keyCode dan which di kode baru: keduanya sudah usang, nilainya berbeda antar browser untuk tanda baca (Firefox mengirim 59 untuk titik koma, sementara Chrome mengirim 186), dan keduanya tidak bisa membedakan Shift kiri dan kanan, atau dua tombol Enter. Meski begitu, keduanya tetap perlu diketahui saat Anda merawat kode lama, itulah sebabnya alat ini menampilkannya.

Tentang cuplikan kode

Listener yang dibuat mencocokkan tombol persis yang Anda tekan, termasuk Ctrl, Alt, dan Meta. Untuk karakter yang dapat dicetak dan dicocokkan dengan key, Shift tidak disertakan karena sudah menjadi bagian dari nilainya: Shift+1 menghasilkan "!" pada layout US. Saat Anda menekan modifier sendirian, cuplikan tidak mengulang flag-nya. Ingat bahwa metaKey adalah tombol Cmd di Mac dan tombol Windows di PC, sehingga shortcut lintas platform biasanya menguji event.ctrlKey || event.metaKey.

Pertanyaan yang sering diajukan

Mengapa keyCode menampilkan angka yang sama untuk karakter berbeda?

keyCode mengidentifikasi tombol, bukan karakter. Angka 1 dan “!” sama-sama bernilai 49, sedangkan “a” dan “A” sama-sama 65. Baca key untuk mendapatkan karakter sebenarnya.

Mengapa tombol AZERTY saya ditampilkan sebagai KeyQ?

code menamai tombol berdasarkan posisinya pada keyboard US QWERTY. Tombol berlabel A pada keyboard Prancis berada di posisi Q pada keyboard US, sehingga code-nya KeyQ sementara key-nya “a”.

Apa arti “Dead” pada event.key?

Itu adalah dead key, seperti ^ atau ¨ pada keyboard Prancis, yang menunggu tombol berikutnya untuk membentuk huruf beraksen. Karakter akhirnya dikirim oleh event tombol berikutnya atau oleh event input pada kolom teks.

Mengapa event.repeat menunjukkan ya?

Anda sedang menahan tombol dan sistem operasi mengirim pengulangan otomatis. Periksa event.repeat untuk mengabaikannya, misalnya agar shortcut hanya dijalankan sekali.

Apakah yang saya ketik direkam atau dikirim?

Tidak. Event tombol dibaca oleh halaman ini di browser Anda dan tidak pernah dikirim ke mana pun. Riwayat akan hilang saat Anda memuat ulang atau meninggalkan halaman.

Alat terkait