Cara Membuat Fitur Show Hide Password dengan Javascript

uiCookies

Apa itu fitur show / hide password itu?

Show hide password / lihat password adalah sebuah fitur untuk memunculkan karakter yang kita ketikkan dalam sebuah form dengan type password. Jika biasanya karakter yang kita ketikkan pada form password hanya berupa bintang atau titik-titik, dengan adanya fitur show hide password ini, kita bisa menampilkan karakter apa yang kita ketikkan dalam form tersebut.

Apasih kegunaan fitur ini?

Fitur ini berfungsi untuk meminimalisir kesalahan user saat memasukan password, karena dengan fitur ini user bisa melihat karakter yang mereka masukkan dalam form password sehingga mereka tahu apakah karakter yang mereka masukkan sudah benar atau belum.

Bagaimana cara membuatnya?

Untuk membuat fitur show hide password sebenarnya tidak sulit. Ada beberapa cara untuk membuat show hide password, bisa menggunakan jquery maupun Vanilla Javascript/Pure Javascript.

Namun kali ini kita akan membuat dengan Vanilla Javascript/Pure Javascript. Berikut adalah caranya :

Persiapan

Ada beberapa persiapan yang mesti dilakukan, diantaranya :

1. Text editor / IDE.
2. Browser.

Proses

Proses pengkodingannya sangat mudah, semoga kalian memahami isi dari kodingannya.

1. Buat File Index.html atau PHP

Dalam index.html, saya tambahkan framework Bootstrap 5 dan icon dari Bootstrap 5 untuk mempercantik tampilan web kita.

index.html

Hasilnya :

tampilan web

namun kita tidak akan fokus ke tampilan, kita akan fokus ke input group password.

input group password

perhatikan id span password (showHide) dan id input password (password).

2. Buat file script.js

Buat file script di folder yang sama dengan file index.html nya

Jika ingin membedakan folder untuk menaruh file JS nya, ubah attribute src di element script ubah isi src="alamat folder script anda"

script.js

Sedikit penjelasan, jadi disini saya memakai Bootstrap 5 dan juga Icon Bootstrap 5. Ketika Icon eye di click maka input passwordnya berubah menjadi input text dan icon eye pada span nya akan berubah menjadi icon eye-slash, kemudian jika diclick kembali maka akan berubah sebaliknya.

Mungkin sekian saja tutorial membuat fitur Show Hide Password. Semoga dapat bermanfaat.