Cara Mendeteksi Tombol Enter Ditekan di JavaScript

Menjalankan aksi saat tombol Enter ditekan membuat form terasa cepat, misalnya pencarian instan atau mengirim pesan chat. Artikel ini membahas cara mendeteksi tombol Enter ditekan di JavaScript.

Event keydown

<input type="text" id="cari">

<script>
document.getElementById("cari").addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        console.log("Enter ditekan!");
    }
});
</script>

Properti e.key berisi nama tombol. Ini lebih modern dibanding keyCode yang sudah usang.

Contoh Kasus: Kirim Chat dengan Enter

<script>
const input = document.getElementById("pesan");
input.addEventListener("keydown", function(e) {
    if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault(); // cegah baris baru
        kirimPesan(input.value);
        input.value = "";
    }
});
</script>

Pemeriksaan !e.shiftKey memungkinkan Shift+Enter untuk baris baru, seperti aplikasi chat sungguhan.

Kesimpulan

Gunakan event keydown dan periksa e.key === "Enter" untuk mendeteksi Enter. Tambahkan !e.shiftKey agar Shift+Enter tetap bisa membuat baris baru pada kolom chat.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *