Tekan Esc Langsung Tertutup Lewat Cara Detect Esc untuk Tutup Modal Javascript

Ditulis oleh JavaScript

Cara detect Esc untuk tutup modal Javascript paling aman memakai listener keydown di document, lalu cek e.key === "Escape" dan pastikan modal sedang terbuka sebelum memanggil fungsi tutup. Pola ini menutup modal aktif saja tanpa mengganggu input lain.

Listener Escape yang Menutup Modal Aktif Saja

Browser mengirim event keyboard ke elemen fokus, lalu menyebar ke atas. Listener di level document menangkap semua tekanan Esc walau fokus ada di tombol atau body.

  1. Buat fungsi openModal() dan closeModal() untuk mengatur class modal.
  2. Pasang document.addEventListener("keydown", handleEsc) sekali saat halaman dimuat.
  3. Di dalam handleEsc, periksa e.key === "Escape".
  4. Periksa status modal, misalnya modal.classList.contains("open").
  5. Jika terbuka, panggil closeModal(), jika tidak, abaikan event.
  6. Lepas listener dengan removeEventListener bila halaman memakai SPA dan komponen dihancurkan.

Kode Minimal Modal Tertutup Tekan Esc

Contoh ini memakai satu modal dan dua tombol. Class open mengontrol tampil atau sembunyi lewat CSS.

<div id="modal" class="modal">
  <div class="modal-box">
    <p>Tekan Esc untuk menutup</p>
    <button id="btnClose">Tutup</button>
  </div>
</div>
<button id="btnOpen">Buka modal</button>

<script>
const modal = document.getElementById("modal");
const btnOpen = document.getElementById("btnOpen");
const btnClose = document.getElementById("btnClose");

function openModal() {
  modal.classList.add("open");
}

function closeModal() {
  modal.classList.remove("open");
}

function handleEsc(e) {
  if (e.key === "Escape" && modal.classList.contains("open")) {
    closeModal();
  }
}

document.addEventListener("keydown", handleEsc);
btnOpen.addEventListener("click", openModal);
btnClose.addEventListener("click", closeModal);
</script>

Pengecekan classList.contains("open") mencegah fungsi tutup berjalan saat modal tidak tampil. Tanpa cek ini, setiap tekanan Esc memanggil closeModal walau tidak ada modal.

BACA JUGA:

Kondisi Gagal dan Cara Menanganinya

Beberapa kondisi membuat Esc terlihat tidak bekerja, padahal listener berjalan normal.

  • Periksa e.key, bukan hanya e.keyCode lama bernilai 27.
  • Pastikan tidak ada dua listener keydown yang saling menimpa logika buka tutup.
  • Pastikan selector modal menunjuk elemen yang benar setelah DOM dimuat.
  • Gunakan e.key === "Escape" karena konsisten di browser modern.
Kondisi Penyebab Perbaikan
Fokus di input Event berhenti atau dipakai komponen lain Tetap dengarkan di document
Dua modal terbuka Selector menutup modal yang salah Tutup modal paling atas saja
Esc kadang aktif Listener dipasang berulang Pasang sekali atau hapus dulu

FAQ

Apakah pakai keydown atau keyup untuk Esc?

Pakai keydown karena responnya langsung dan cocok untuk aksi tutup modal.

Kenapa modal tidak tertutup padahal tombol Esc ditekan?

Umumnya nama key salah, selector modal keliru, atau status terbuka tidak diperiksa sebelum menutup.

Perlu melepas listener setelah modal tertutup?

Tidak wajib untuk halaman biasa, tetapi lepas listener bila komponen modal sering dibuat dan dihancurkan.

Artikel Terkait