Event fokus adalah suatu kondisi dimana kursor berada di dalam tag input html dan event blur adalah suatu kondisi dimana kursor berada di luar tag input. Dan pada kesempatan kali ini saya akan membahasnya dengan artikel yang berjudul Cara Membuat Event Fokus Dan Blur Dengan AngularJs.

Cara Membuat Event Fokus Dan Blur Dengan AngularJs akan saya buat dengan cara memberikan efek terhadap tag inputnya ketika dalam keaadaan fokus maupun keadaan blurnya. Langkah pertama disini saya akan membuat sebuah fungsi dalam controller fungsi fokus dan blur seperti script di bawah ini.

Teman-teman bisa perhatikan fungsi fokus yang saya buat dimana didalamnya terdapat variable status dengan nilai aktif dan alert kosong. Sedangkan di dalam fungsi blur saya buat nilai status nonaktif dengan alert yang berisi wajib di isi. Untuk variable alert ini sebenernya teman-teman bisa kembangkan lagi sendiri untuk membuat sebuah validasi ketika event blur dan input text kosong.

Dan langkah selanjutnya kita akan membuat struktur html yang berisi tag input seperti script di bawah ini.

Dalam tag input di atas saya memberikan direktif ng-focus dengan parameter berisi fungsi focus() dan ng-blur dengan parameter berisi fungsi blur() untuk memberikan efeknya saya menggunakan class dengan nama input-{{status}}, dimana status ini adalah nilai yang dinamis yang di ambil dari variable status di dalam fungsi focus() dan blur().

Jika sudah langkah terakhir kita hanya tinggal membuat sebuat style css dari class input-aktif danĀ  class input-nonaktif seperti script di bawah ini.

Maka jika teman-teman buka browser akan seperti pada gambar di bawah ini.

Cara Membuat Event Fokus Dan Blur Dengan AngularJs

Cara Membuat Event Fokus Dan Blur Dengan AngularJs

Demikian artikel tentang Cara Membuat Event Fokus Dan Blur Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba ya.