KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Membuat Fitur Show Hide Password dengan Javascript

23 Januari 2018 | Kategori : JavaScript

Setelah beberapa kesibukan yang saya alami, akhirnya pada kesempatan kali ini saya bisa berbagi tutorial lagi kepada sobat semua. Tutorial yang akan saya bagi kali ini tentang bagaimana cara membuat fitur show / hide password dalam sebuah form.

js.png

Apa sih fitur show / hide password itu ?

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

Apasih kegunaan fitur ini ?

Fitur ini berguna untuk meminimalisir kesalahan user saat memasukkan 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.

Sulit nggak sih bikinnya ?

Untuk membuat fitur show hide password ini sebenarnya tidak sulit kok sob, karena kita hanya akan bermain dengan javascript saja. Oke sobat, langsung saja silahkan sobat simak tutorial di bawah ini step by step :

Beberapa file yang saya gunakan dalam tutorial ini antara lain :

  1. file index.html
  2. bootstrap css dan font glyphicon

untuk struktur file-nya bisa sobat lihat pada gambar di bawah ini :

show1.png

Silahkan sobat siapkan dulu file-file yang dibutuhkan, jika sudah silahkan sobat buka file index.html lalu silahkan ketikkan script di bawah ini :

Sedikit penjelasan untuk javascriptnya ya sob, ketika icon mata diklik maka fungsi change pada javascript akan menangkap type form input kemudian akan melakukan pengecekan apakah form tersebut bertipe password atau bukan. Nah, jika form tersebut bertipe password, maka type form akan diubah menjadi text, namun jika form tersebut tidak bertipe password, maka tipenya akan diubah menjadi password.

Kemudian save file html-nya dan silahkan sobat coba jalankan. Untuk tampilannya kurang lebih seperti pada gambar di bawah ini :

show2.png

Gambar Hide Password

show3.png

Gambar Show Password

Oh iya, bagi sobat yang ingin langsung mencobanya, silahkan sobat coba demo di bawah ini :

Oke sobat, saya rasa cukup sekian tutorial tentang cara membuat fitur show hide password yang bisa saya bagi kali ini. Semoga sedikit coretan ini bisa bermanfaat bagi sobat semua. Jangan lupa share ya sob jika dirasa coretan ini bermanfaat.