Sign in Subscribe
Javascript

Menemukan Elemen Aktif di Halaman dengan Active Element

Menemukan Elemen Aktif di Halaman dengan Active Element
Photo by Joshua Reddekopp / Unsplash

Pernah kepikiran gimana cara tahu elemen mana yang sedang aktif di sebuah halaman web? Nah, document.activeElement adalah jawabannya! Dengan fitur ini, kita bisa melacak elemen yang sedang fokus di halaman, misalnya input yang sedang diketik atau tombol yang sedang dipilih.

Fitur ini sangat berguna untuk banyak kasus, seperti validasi form, navigasi keyboard, aksesibilitas, dan bahkan debugging untuk elemen yang tidak bisa langsung terlihat.

Apa Itu document.activeElement?

document.activeElement adalah properti dalam JavaScript yang mengembalikan elemen yang sedang aktif dalam DOM (Document Object Model). Ini berarti elemen tersebut sedang menerima input dari pengguna, baik itu teks dalam input field, tombol yang ditekan, atau elemen lain yang bisa mendapatkan fokus.

Sintaks Dasar

console.log(document.activeElement);

Kode ini akan menampilkan elemen yang sedang aktif di halaman.

Jika tidak ada elemen yang fokus, maka biasanya nilai yang dikembalikan adalah elemen <body>.

Contoh Penggunaan document.activeElement

1. Menampilkan Elemen yang Sedang Aktif

Mari kita buat contoh sederhana untuk melihat elemen yang sedang aktif secara real-time.

<input type="text" id="input1" placeholder="Ketik di sini...">
<input type="text" id="input2" placeholder="Atau di sini...">
<button id="cekAktif">Cek Elemen Aktif</button>
<p id="hasil"></p>

document.getElementById("cekAktif").addEventListener("click", function() {
    const aktif = document.activeElement;
    document.getElementById("hasil").innerText = `Elemen aktif saat ini: ${aktif.tagName} dengan id '${aktif.id}'`;
});

Jika pengguna mengklik tombol Cek Elemen Aktif setelah mengetik dalam salah satu input, maka hasilnya akan seperti ini:

Elemen aktif saat ini: INPUT dengan id 'input1'

2. Menjalankan Aksi Saat Elemen Tertentu Aktif

Misalnya, kita ingin menampilkan pesan ketika pengguna mulai mengetik di input tertentu.

document.getElementById("input1").addEventListener("focus", function() {
    console.log("Input pertama sedang aktif!");
});

document.getElementById("input2").addEventListener("focus", function() {
    console.log("Input kedua sedang aktif!");
});

Ketika pengguna mengklik atau mengetik di input1, pesan ini akan muncul di konsol:

Input pertama sedang aktif!

Dan jika mereka beralih ke input2, akan muncul:

Input kedua sedang aktif!

3. Menutup Modal Otomatis Saat Fokus Berpindah

Jika kita punya modal dialog yang seharusnya tertutup ketika pengguna mengklik di luar modal, kita bisa menggunakan document.activeElement untuk mendeteksi saat fokus berpindah ke luar modal.

document.addEventListener("click", function() {
    const modal = document.getElementById("modal");
    if (!modal.contains(document.activeElement)) {
        modal.style.display = "none";
    }
});

Jika pengguna mengklik di luar modal, elemen aktif akan berpindah ke <body> atau elemen lain, sehingga modal bisa otomatis tertutup.

Kapan Menggunakan document.activeElement?

✅ Jika ingin mengecek elemen yang sedang fokus dalam halaman.
✅ Jika ingin menjalankan aksi otomatis berdasarkan elemen yang aktif.
✅ Jika ingin meningkatkan aksesibilitas dengan memberikan highlight pada elemen yang aktif.
✅ Jika ingin menutup modal otomatis ketika fokus berpindah ke luar modal.

Kesimpulan

  • document.activeElement adalah properti JavaScript yang mengembalikan elemen yang sedang aktif di halaman.
  • Berguna untuk validasi form, debugging, navigasi keyboard, dan interaksi modal.
  • Bisa digunakan untuk mendeteksi input yang sedang diketik atau mengontrol tampilan elemen berdasarkan fokus pengguna.
  • Sangat membantu dalam membuat halaman yang lebih interaktif dan user-friendly.

Dengan memahami cara kerja document.activeElement, kita bisa membuat website yang lebih dinamis, responsif, dan cerdas. Yuk, coba langsung di proyekmu!

Read next