Keyboard Event: keydown, keyup, dan Shortcut

Kenapa Keyboard Event Penting?

Hampir semua aplikasi interaktif butuh keyboard: game digerakkan tombol panah/WASD, form dikirim dengan Enter, aplikasi punya shortcut seperti Ctrl+S untuk simpan. Tanpa keyboard event, user dipaksa selalu memakai mouse, melelahkan untuk pemakaian intensif. Event keyboard adalah jembatan antara jari user dan logika aplikasimu.

Contoh 1: Menampilkan Tombol yang Ditekan

document.addEventListener("keydown", (e) => {
  console.log("key:", e.key);   // karakter yang dihasilkan, misal "a", "Enter", "ArrowUp"
  console.log("code:", e.code); // posisi fisik tombol, misal "KeyA", "Enter", "ArrowUp"
});

document.addEventListener("keyup", (e) => {
  console.log("Dilepas:", e.key);
});

e.key vs e.code: e.key adalah karakter yang dihasilkan tombol (tergantung layout keyboard dan Shift: tombol yang sama bisa menghasilkan "a" atau "A"). e.code adalah posisi fisik tombol di keyboard (selalu "KeyA" walau layout-nya Dvorak atau AZERTY). Untuk game, pakai e.code supaya kontrol konsisten di semua layout. Untuk input teks, pakai e.key.

Contoh 2: Game Geser Kotak + Shortcut

<div id="kotak" style="width:50px;height:50px;background:violet;position:absolute;"></div>

const kotak = document.getElementById("kotak");
let x = 0, y = 0;

document.addEventListener("keydown", (e) => {
  // Shortcut: Ctrl+S untuk simpan (cegah dialog save browser!)
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("Posisi tersimpan!");
    return;
  }

  const langkah = 10;
  if (e.code === "ArrowRight") x += langkah;
  if (e.code === "ArrowLeft") x -= langkah;
  if (e.code === "ArrowDown") y += langkah;
  if (e.code === "ArrowUp") y -= langkah;

  kotak.style.transform = "translate(" + x + "px," + y + "px") ;

  // Cegah halaman scroll saat tombol panah ditekan
  if (e.code.startsWith("Arrow")) e.preventDefault();
});

Perhatikan e.preventDefault(): browser punya aksi bawaan (panah = scroll, Ctrl+S = dialog save). Kalau aplikasimu mengambil alih tombol itu, kamu wajib membatalkan aksi bawaannya.

Jebakan Umum

1. keypress sudah usang, jangan dipakai. Event keypress deprecated dan tidak konsisten antar browser. Pakai keydown (saat ditekan) dan keyup (saat dilepas).

2. keyCode usang, pakai key atau code. e.keyCode memberi angka misterius (13, 65...) yang tidak readable. Sudah deprecated, jangan dipakai di kode baru.

3. Tombol yang ditahan memicu keydown berulang (key repeat). Kalau game-mu menambah skor tiap keydown, menahan tombol bisa menambah skor berkali-kali. Cek e.repeat untuk mengabaikannya:

document.addEventListener("keydown", (e) => {
  if (e.repeat) return; // abaikan pengulangan saat tombol ditahan
  console.log("Sekali saja:", e.key);
});

4. Event tidak jalan saat fokus di input. Kalau user sedang mengetik di <input>, keydown tetap fire tapi e.target-nya input. Untuk shortcut global, cek e.target.tagName dan lewati jika sedang mengetik, supaya shortcut tidak mengganggu.

Ringkasan

Pakai keydown/keyup, baca e.key untuk karakter dan e.code untuk posisi fisik tombol. Ingat preventDefault() untuk mengambil alih aksi bawaan browser, waspadai key repeat lewat e.repeat, dan tinggalkan keypress/keyCode di masa lalu.