Perbedaan Keypress Keydown dan Keyup dalam JavaScript

Dalam pengembangan web, sering kali kita perlu menangani input dari keyboard. JavaScript menyediakan tiga event utama untuk mendeteksi interaksi keyboard, yaitu keypress, keydown, dan keyup. Meskipun ketiganya terlihat mirip, masing-masing memiliki fungsi dan perbedaan yang perlu dipahami agar bisa digunakan dengan benar.

Artikel ini akan menjelaskan perbedaan antara ketiga event ini, cara menggunakannya, serta kapan waktu terbaik untuk mengimplementasikannya dalam aplikasi web.

Perbedaan Keypress, Keydown, dan Keyup

Catatan: keypress sudah deprecated dan tidak disarankan untuk digunakan dalam pengembangan modern.

Cara Menggunakan Keydown, Keypress, dan Keyup

Kita bisa menangkap event keyboard menggunakan addEventListener() atau dengan atribut event langsung di HTML.

1. Menggunakan Keydown

Event keydown dipicu saat pengguna menekan tombol di keyboard. Event ini menangkap semua tombol, termasuk tombol navigasi seperti ArrowUp, ArrowDown, Enter, dan sebagainya.

document.addEventListener("keydown", function(event) {
    console.log("Tombol ditekan: ", event.key);
});

Jika kita menekan tombol "A", output di console:

Tombol ditekan: a

Contoh penggunaan:

• Menangani keyboard shortcut seperti Ctrl + S untuk menyimpan.
• Menjalankan aksi saat tombol Enter ditekan.

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log("Tombol Enter ditekan!");
    }
});

2. Menggunakan Keyup

Event keyup dipicu setelah tombol dilepas. Ini berguna jika kita hanya ingin menangani aksi final setelah tombol tidak lagi ditekan.

document.addEventListener("keyup", function(event) {
    console.log("Tombol dilepas: ", event.key);
});

Jika kita menekan tombol "B" dan kemudian melepasnya, output di console:

Tombol dilepas: b

Contoh penggunaan:

• Menyimpan input setelah pengguna selesai mengetik.
• Menghentikan animasi saat tombol dilepas.

3. Menggunakan Keypress (Deprecated, Jangan Digunakan)

Event keypress dulunya digunakan untuk menangkap input karakter dari keyboard, tetapi sekarang sudah tidak direkomendasikan.

document.addEventListener("keypress", function(event) {
    console.log("Tombol ditekan: ", event.key);
});

Namun, event ini tidak menangkap tombol non-karakter seperti Shift, Esc, atau tombol navigasi, sehingga lebih baik menggunakan keydown atau keyup.

Kapan Menggunakan Keydown dan Keyup?

✅ Gunakan keydown jika ingin menangkap tombol yang ditekan secara terus-menerus, seperti untuk shortcut keyboard atau pergerakan dalam game.
✅ Gunakan keyup jika ingin menangkap aksi setelah tombol dilepas, seperti mengakhiri aksi atau menyimpan input pengguna.
❌ Hindari keypress karena sudah deprecated dan memiliki keterbatasan dalam menangkap tombol tertentu.

Kesimpulan

• keydown digunakan saat tombol pertama kali ditekan dan cocok untuk shortcut atau aksi instan.
• keyup digunakan saat tombol dilepas, ideal untuk menyimpan data atau menghentikan aksi.
• keypress sudah tidak direkomendasikan karena hanya menangkap karakter dan tidak mendukung semua tombol.

Dengan memahami perbedaan ketiga event ini, kita bisa menangani input keyboard dengan lebih efisien dan sesuai dengan kebutuhan aplikasi web!