Add Event Listener Javascript Keypress

MUAZHAN

3 min read

·

Jun 22, 2024

38

Share

Menambahkan Event Listener keypress pada JavaScript

Event listener keypress dalam JavaScript digunakan untuk mendeteksi ketika tombol keyboard ditekan dan dilepaskan. Ini adalah cara yang efektif untuk membuat interaksi dinamis dalam aplikasi web Anda.

Berikut adalah langkah-langkah dasar untuk menambahkan event listener keypress pada elemen HTML:

1. Pilih Elemen HTML:

   • Tentukan elemen HTML yang Anda ingin tangani event keypress-nya.
   • Anda dapat menggunakan metode getElementById(), querySelector(), atau querySelectorAll() untuk memilih elemen yang tepat.

2. Tambahkan Event Listener:

   • Gunakan metode addEventListener() pada elemen yang dipilih.
   • Sebutkan event keypress sebagai argumen pertama.
   • Tentukan fungsi callback yang akan dieksekusi ketika event keypress terjadi sebagai argumen kedua.

3. Tulis Fungsi Callback:

   • Dalam fungsi callback, Anda dapat mengakses informasi terkait event keypress.
   • Gunakan objek event untuk mendapatkan informasi seperti:
     • event.key: Menampilkan karakter yang ditekan.
     • event.code: Menampilkan kode tombol yang ditekan.
     • event.keyCode: Menampilkan kode tombol numerik.
     • event.target: Menampilkan elemen yang memicu event.
     • event.preventDefault(): Menghentikan aksi default dari event (misalnya, mencegah input dari ditampilkan dalam form).

Contoh:

// Pilih elemen input
const inputField = document.getElementById("myInput");

// Tambahkan event listener 'keypress'
inputField.addEventListener("keypress", function(event) {
  // Tampilkan karakter yang ditekan
  console.log("Karakter yang ditekan: ", event.key);

  // Cek jika tombol 'Enter' ditekan
  if (event.key === "Enter") {
    console.log("Tombol Enter ditekan!");
    // Lakukan sesuatu jika tombol Enter ditekan
    event.preventDefault(); // Mencegah input dari dikirimkan
  }
});

Kode HTML:

Penjelasan:

• Kode di atas memilih elemen input dengan ID "myInput".
• Event listener keypress ditambahkan ke elemen input.
• Fungsi callback menampilkan karakter yang ditekan ke konsol.
• Jika tombol "Enter" ditekan, pesan akan ditampilkan ke konsol dan aksi default (mengirimkan input) dicegah.

Catatan:

• Event listener keypress hanya berfungsi untuk karakter yang dapat dicetak.
• Untuk menangani event keyboard lainnya, seperti menekan tombol panah atau tombol fungsi, gunakan event listener keydown atau keyup.

Dengan memahami cara menambahkan event listener keypress pada JavaScript, Anda dapat membuat aplikasi web yang lebih responsif dan interaktif.