Event Input

Event click dari chapter sebelumnya terpicu sekali per penekanan tombol, sementara banyak fitur membutuhkan umpan balik yang mengikuti ketikan: penghitung karakter, pratinjau nama file, atau saran pencarian yang berubah seketika. Untuk kebutuhan semacam ini, browser menyediakan keluarga event yang dipancarkan elemen form setiap kali isian berubah. Chapter ini membandingkan event input dan change, menunjukkan cara membaca nilai terbaru lewat e.target.value, lalu merangkainya menjadi penghitung karakter untuk textarea.

Event input, change, dan keydown #

Tiga event berikut paling sering dipertemukan saat bekerja dengan elemen form. Kuncinya adalah membedakan kapan masing-masing terpicu:

Perbedaan input dan change paling terasa pada kolom teks. Ketik lima huruf lalu pindahkan fokus: event input terpicu lima kali, sedangkan change hanya sekali di akhir. Event input juga terpicu saat isi ditempel atau dihapus, bukan hanya saat mengetik — inilah alasan event ini menjadi pilihan utama untuk pemantauan real-time.

Event keydown menutup tabel kita sebagai pelengkap. Event ini terpicu setiap tombol keyboard ditekan, tetapi callback-nya berjalan sebelum nilai input diperbarui, sehingga membaca value di dalamnya memberi hasil lama. Bila tujuan kita membaca isi kolom, gunakan event input; bila tujuan kita mendeteksi tombol tertentu seperti Escape untuk menutup panel, keydown yang tepat.

Membaca Isian dengan e.target.value #

Objek event yang diterima callback membawa elemen sumber kejadian pada properti target, dan elemen form menyimpan nilai terkininya pada properti value. Menggabungkan keduanya memberi kita akses langsung ke teks yang baru diketik:

const email = document.querySelector("#email");

email.addEventListener("input", function (event) {
  console.log(event.target.value);
});

Setiap perubahan pada kolom email dicetak ke console: b, bu, bud, lalu [email protected]. Karena event.target merujuk ke elemen itu sendiri, event.target.value selalu berisi nilai terbaru pada momen callback berjalan. Cara yang setara adalah memanggil email.value langsung, sebagaimana dipakai pada contoh di bawah.

Contoh: Penghitung Karakter untuk Textarea #

Kita bangun fitur yang lazim ditemui pada kolom bio: textarea dibatasi 120 karakter oleh atribut maxlength, dan sebuah teks kecil menghitung pemakaian secara langsung. File penghitung-karakter.html menyediakan struktur, gaya, dan tempat skrip dipasang:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Penghitung Karakter Bio</title>
  <script src="penghitung-karakter.js" defer></script>
  <style>
    .penghitung-penuh {
      color: #b3261e;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Bio Singkat</h1>
  <label for="bio">Bio profil (maksimal 120 karakter)</label>
  <textarea id="bio" name="bio" rows="4" maxlength="120"></textarea>
  <p id="penghitung" aria-live="polite">0 / 120 karakter</p>
</body>
</html>

Logikanya hidup di file penghitung-karakter.js:

const bio = document.querySelector("#bio");
const penghitung = document.querySelector("#penghitung");
const batas = bio.maxLength;

bio.addEventListener("input", function () {
  const panjang = bio.value.length;
  penghitung.textContent = panjang + " / " + batas + " karakter";
  if (panjang === batas) {
    penghitung.classList.add("penghitung-penuh");
  } else {
    penghitung.classList.remove("penghitung-penuh");
  }
});

Output yang Dihasilkan:

Saat halaman baru dibuka:
  - Textarea kosong dengan label "Bio profil (maksimal 120 karakter)"
  - Teks "0 / 120 karakter" di bawahnya
Saat "Halo, saya Budi" diketik:
  - Teks berubah menjadi "15 / 120 karakter" seiring tiap huruf
Saat teks mencapai 120 karakter:
  - Tulisan penghitung berubah merah dan tebal

Mari kita bedah baris demi baris:

1. Baris 1-3 JS (querySelector dan bio.maxLength): kode memilih textarea dan teks penghitung, lalu membaca batas dari atribut maxlength. Properti maxLength mencerminkan atribut HTML dengan nama yang sama, sehingga angka 120 cukup ditulis satu kali di markup.
2. Baris 5 JS (addEventListener("input", ...)): listener dipasang pada textarea, dan callback berjalan setiap kali isian berubah, termasuk saat menempel teks.
3. Baris 6 JS (bio.value.length): value berisi teks terkini, dan properti length menghitung jumlah karakternya.
4. Baris 7 JS (textContent = panjang + " / " + ...): operator + di sini menggabungkan string dengan angka, menghasilkan tulisan seperti 15 / 120 karakter.
5. Baris 8 JS (if (panjang === batas)): kondisi membandingkan dua nilai dengan operator ===, yang benar hanya bila keduanya sama nilai dan sama tipe. Bila panjang mencapai batas, class penghitung-penuh ditambahkan; selain itu class dilepas — persis teknik dari chapter Mengubah Class Elemen.

Penghitung ini menunjukkan pola besar dari event input: elemen form memicu event, callback membaca value, lalu halaman diperbarui seketika. Chapter berikutnya memakai pola yang sama untuk tujuan berbeda — mengubah visibilitas konten, dari panel FAQ hingga menu yang muncul dan tersembunyi.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Event: input
• MDN Web Docs — Event: change
• MDN Web Docs — Event: keydown
• MDN Web Docs — HTMLTextAreaElement

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Penghitung Karakter Bio</title>
  <script src="penghitung-karakter.js" defer></script>
  <style>
    .penghitung-penuh {
      color: #b3261e;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Bio Singkat</h1>
  <label for="bio">Bio profil (maksimal 120 karakter)</label>
  <textarea id="bio" name="bio" rows="4" maxlength="120"></textarea>
  <p id="penghitung" aria-live="polite">0 / 120 karakter</p>
</body>
</html>

const bio = document.querySelector("#bio");
const penghitung = document.querySelector("#penghitung");
const batas = bio.maxLength;

bio.addEventListener("input", function () {
  const panjang = bio.value.length;
  penghitung.textContent = panjang + " / " + batas + " karakter";
  if (panjang === batas) {
    penghitung.classList.add("penghitung-penuh");
  } else {
    penghitung.classList.remove("penghitung-penuh");
  }
});