Add Event Listener Javascript Input

MUAZHAN

3 min read

·

Jun 22, 2024

35

Share

Menambahkan Event Listener pada Input dalam JavaScript

Event listener dalam JavaScript memungkinkan kita untuk merespon interaksi pengguna dengan elemen HTML. Salah satunya adalah event listener pada input, yang memungkinkan kita untuk menjalankan kode JavaScript ketika pengguna berinteraksi dengan input, seperti mengetik, menempel, atau mengubah nilai.

Cara Menambahkan Event Listener pada Input

Berikut adalah cara menambahkan event listener pada input dalam JavaScript:

1. Pilih elemen input: Gunakan metode document.getElementById() atau document.querySelector() untuk memilih elemen input yang ingin Anda tambahkan event listener.
2. Tentukan event: Tentukan jenis event yang ingin Anda tanggapi. Beberapa event yang umum digunakan pada input adalah:
   • input: Diaktifkan setiap kali nilai input berubah.
   • change: Diaktifkan ketika fokus berpindah dari input dan nilainya telah berubah.
   • keyup: Diaktifkan ketika pengguna menekan tombol keyboard dan melepaskannya.
   • keydown: Diaktifkan ketika pengguna menekan tombol keyboard.
   • paste: Diaktifkan ketika pengguna menempelkan teks ke input.
3. Tambahkan event listener: Gunakan metode addEventListener() untuk menambahkan event listener ke elemen input.

Contoh Kode

Berikut adalah contoh kode untuk menambahkan event listener input pada input teks:

const inputField = document.getElementById("myInput");

inputField.addEventListener("input", function() {
  // Kode yang akan dijalankan ketika nilai input berubah
  console.log("Nilai input: ", inputField.value);
});

Kode ini akan menampilkan nilai input di konsol browser setiap kali nilai input berubah.

Penerapan dalam Praktik

Event listener pada input dapat digunakan untuk berbagai keperluan, seperti:

• Validasi input: Memeriksa apakah nilai input sesuai dengan format yang diinginkan.
• Memperbarui tampilan: Menampilkan preview nilai input atau mengubah tampilan halaman berdasarkan nilai input.
• Mengirim data ke server: Mengirim nilai input ke server untuk diproses.
• Melakukan operasi lain: Menjalankan fungsi JavaScript lain berdasarkan nilai input.

Kesimpulan

Menambahkan event listener pada input dalam JavaScript adalah cara yang mudah dan efektif untuk merespon interaksi pengguna dengan input. Dengan event listener, Anda dapat membuat aplikasi web yang lebih interaktif dan responsif.