Kode tombol Numpad di JavaScript

Untuk tombol Numpad, event.key adalah 0–9, +, -, *, /, ., event.code adalah Numpad0–Numpad9, NumpadAdd …, dan keyCode yang sudah usang adalah 96. Tekan tombol apa pun di Key Code Finder untuk melihat nilainya secara langsung.

Diperbarui

PropertiNilai
event.key0–9, +, -, *, /, .
event.codeNumpad0–Numpad9, NumpadAdd …
event.keyCode / which (usang)96

Cara mendeteksi tombol Numpad

document.addEventListener('keydown', (event) => {
  if (event.code.startsWith('Numpad')) {
    // Numpad keys was pressed
  }
});

Gunakan event.key untuk merespons arti tombol (mengikuti tata letak keyboard) dan event.code untuk posisi fisiknya, misalnya WASD di game. keyCode dan which sudah usang: masih berfungsi, tetapi nilainya berbeda antar browser dan tata letak.

Bagaimana browser menangani tombol Numpad

Digit Numpad memiliki event.key yang sama dengan digit di baris atas, tetapi nilai event.code yang berbeda (Numpad0–Numpad9) dan keyCode 96–105. NumpadAdd adalah 107, NumpadSubtract 109, NumpadMultiply 106, NumpadDivide 111, dan NumpadDecimal 110.

Di React

<input onKeyDown={(e) => { if (e.code.startsWith('Numpad')) { /* … */ } }} />

Pertanyaan yang sering diajukan

Apa keyCode untuk tombol Numpad?
96. Namun ini sudah usang: gunakan event.key (“0–9, +, -, *, /, .”) atau event.code (Numpad0) di kode baru.
Apa perbedaan event.key dan event.code?
event.key adalah karakter atau aksi yang dihasilkan tombol dengan tata letak saat ini; event.code adalah posisi fisik tombol, sama di setiap tata letak.
Sebaiknya pakai keydown atau keypress?
keydown. Event keypress sudah usang dan tidak terpicu untuk tombol yang tidak menghasilkan karakter, seperti Escape atau tombol panah.