Membuat Formulir Lebih Interaktif dengan Focus Event

Dalam pengembangan web, formulir adalah elemen penting yang sering digunakan untuk mengumpulkan data dari pengguna. Namun, tanpa interaksi yang baik, pengguna bisa merasa bingung atau kesulitan saat mengisi formulir. Salah satu cara untuk meningkatkan pengalaman pengguna adalah dengan menggunakan Focus Event di JavaScript.

Focus Event memungkinkan kita untuk menyorot, memberikan petunjuk, atau melakukan validasi input secara langsung saat pengguna mulai mengetik di dalam form. Dengan cara ini, formulir bisa menjadi lebih intuitif dan membantu pengguna mengisi data dengan benar.

Artikel ini akan membahas cara menggunakan Focus Event dalam JavaScript serta contoh penerapannya untuk meningkatkan interaksi dalam formulir.

Apa Itu Focus Event?

Focus Event adalah event yang dipicu ketika suatu elemen, biasanya input atau textarea, mendapatkan atau kehilangan fokus. Ada beberapa event utama yang berhubungan dengan focus:

1. focus → Dipicu ketika elemen mendapatkan fokus.
2. blur → Dipicu ketika elemen kehilangan fokus.
3. focusin → Dipicu ketika fokus masuk ke elemen dalam suatu parent.
4. focusout → Dipicu ketika fokus keluar dari elemen dalam suatu parent.

Cara Menggunakan Focus Event

Kita bisa menangani event ini menggunakan addEventListener() atau langsung dengan atribut event di dalam HTML.

1. Menyorot Input yang Sedang Aktif

Untuk memberikan efek visual ketika input sedang aktif, kita bisa menambahkan border atau bayangan menggunakan JavaScript:

<input type="text" id="nama" placeholder="Masukkan Nama">

document.getElementById("nama").addEventListener("focus", function() {
    this.style.border = "2px solid blue";
});

document.getElementById("nama").addEventListener("blur", function() {
    this.style.border = "1px solid #ccc";
});

Saat input difokuskan, border akan berubah menjadi biru. Setelah kehilangan fokus, border akan kembali ke warna default.

2. Menampilkan Petunjuk saat Input Fokus

Kita bisa menampilkan pesan bantuan ketika pengguna mulai mengisi input.

<input type="password" id="password" placeholder="Masukkan Password">
<p id="petunjuk" style="display: none; color: gray;">Gunakan minimal 8 karakter.</p>

document.getElementById("password").addEventListener("focus", function() {
    document.getElementById("petunjuk").style.display = "block";
});

document.getElementById("password").addEventListener("blur", function() {
    document.getElementById("petunjuk").style.display = "none";
});

Ketika input password difokuskan, petunjuk akan muncul, dan saat kehilangan fokus, petunjuk akan disembunyikan.

3. Validasi Input saat Kehilangan Fokus

Focus event juga bisa digunakan untuk validasi data sebelum pengguna mengirim formulir.

<input type="email" id="email" placeholder="Masukkan Email">
<p id="error" style="color: red; display: none;">Format email tidak valid</p>

document.getElementById("email").addEventListener("blur", function() {
    const email = this.value;
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regex.test(email)) {
        document.getElementById("error").style.display = "block";
    } else {
        document.getElementById("error").style.display = "none";
    }
});

Jika format email tidak valid, pesan error akan muncul setelah input kehilangan fokus.

Menggunakan focusin dan focusout untuk Event pada Parent

Jika kita ingin menangani event focus untuk beberapa elemen sekaligus tanpa menambahkan event listener satu per satu, kita bisa menggunakan focusin dan focusout pada parent element.

<div id="form-container">
    <input type="text" placeholder="Nama">
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
</div>

document.getElementById("form-container").addEventListener("focusin", function(event) {
    event.target.style.backgroundColor = "#e0f7fa";
});

document.getElementById("form-container").addEventListener("focusout", function(event) {
    event.target.style.backgroundColor = "white";
});

Ketika pengguna mulai mengetik di salah satu input, latar belakang akan berubah warna, dan setelah kehilangan fokus, warna akan kembali seperti semula.

Kapan Harus Menggunakan Focus Event?

✅ Jika ingin menyorot input yang sedang aktif agar pengguna lebih fokus.
✅ Jika ingin menampilkan petunjuk atau bantuan saat pengguna mulai mengisi data.
✅ Jika ingin melakukan validasi input secara langsung sebelum pengguna mengirimkan formulir.
✅ Jika ingin menangani event focus untuk banyak elemen dalam satu event listener.

❌ Jangan gunakan efek focus yang terlalu mengganggu, seperti animasi berlebihan atau peringatan yang tidak perlu.

Kesimpulan

• Focus Event digunakan untuk menangani interaksi pengguna dengan input dalam formulir.
• Bisa digunakan untuk menyorot input yang aktif, menampilkan petunjuk, atau melakukan validasi otomatis.
• Event focusin dan focusout cocok digunakan untuk menangani banyak elemen tanpa perlu menambahkan event listener satu per satu.
• Penggunaan yang tepat dapat meningkatkan pengalaman pengguna dalam mengisi formulir.

Dengan memahami cara kerja Focus Event, kita bisa membuat formulir yang lebih intuitif, interaktif, dan mudah digunakan!