Cara Detect Tombol Enter pada Input Javascript untuk Search dan Chat

Ditulis oleh JavaScript

Pasang listener keydown pada input lalu cek e.key === ‘Enter’. Itu cara detect tombol Enter pada input JavaScript yang paling stabil untuk search dan chat. Jangan pakai keypress karena sudah deprecated dan perilakunya tidak konsisten antar browser.

<input id="search" type="text" placeholder="Ketik lalu Enter">
<script>
const input = document.getElementById('search');
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter ditekan:', input.value);
  }
});
</script>

Gunakan e.key === ‘Enter’ di Event keydown

Event keydown aktif tepat saat tombol ditekan, jadi respons search dan chat terasa instan. Properti e.key membaca karakter hasil penekanan, nilainya ‘Enter’ untuk tombol Enter.

  • e.key: nilai tombol yang ditekan, contoh ‘Enter’, ‘a’, ‘Escape’. Ini yang dipakai sekarang.
  • e.code: posisi fisik tombol di keyboard, contoh ‘Enter’ atau ‘NumpadEnter’. Berguna untuk layout game, kurang cocok untuk form.
  • e.keyCode: angka lama untuk Enter, yaitu 13. Sudah deprecated, hindari untuk kode baru.

Langkah Pasang Detect Enter pada Input

  1. Ambil elemen input setelah DOM siap. Taruh script di akhir body atau bungkus dengan DOMContentLoaded.
  2. Tambah listener keydown, lalu cek kondisinya dengan if (e.key === ‘Enter’).
  3. Jalankan aksinya. Untuk search, panggil fungsi cari. Untuk chat, ambil value, tampilkan pesan, lalu kosongkan input.
  4. Cegah submit form bila input berada di dalam form dengan e.preventDefault().
const inputChat = document.querySelector('#chatInput');
inputChat.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    kirimPesan(inputChat.value);
  }
});

BACA JUGA:

Cek Cepat Kalau Enter Tidak Terdeteksi

  • Script jalan sebelum input ada di DOM.
  • ID atau selector salah sehingga addEventListener gagal.
  • Form reload karena submit bawaan browser.
  • Masih memakai keypress atau keyCode 13.

Kondisi | Penyebab | Solusi

input null script di head tanpa DOM siap pindah script ke bawah atau pakai DOMContentLoaded
Salah ID getElementById tidak cocok samakan id HTML dan JavaScript
Halaman reload form submit otomatis tambah preventDefault pada submit atau keydown
Enter tidak terbaca pakai keypress ganti ke keydown dan e.key 
<form id="formSearch">
  <input id="q" type="text">
</form>
<script>
const form = document.getElementById('formSearch');
const q = document.getElementById('q');
if (q) {
  q.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      console.log('Cari:', q.value);
    }
  });
}
</script>

FAQ

Apakah tetap pakai keyCode 13 untuk detect Enter?

Tidak. Pakai e.key === ‘Enter’ karena sintaksnya jelas dan didukung browser modern.

Kenapa form reload saat tekan Enter?

Karena browser menjalankan submit bawaan form, tahan dengan preventDefault.

keydown atau keyup yang lebih cocok untuk input?

Pakai keydown agar aksi jalan langsung saat tombol ditekan, bukan saat dilepas.

Artikel Terkait