Cara menampilkan dan menyembunyikan password pada form html dengan javascript (show hide password) — Ketika kita hendak login ke sebuah sistem biasanya diharuskan untuk memasukan password, atau ketika ketika mendaftar / register, kita juga diminta untuk menentukan password yang kita inginkan.
Biasanya setiap hendak menginput pada bagian password tersebut, selalu saja karakternya disembunyikan, baik itu diganti dengan tanda bintang ‘***’ atau bulat ‘•••’ , sehingga kita tidak mengetahui apasih yang sebenarnya kita ketik. Ini sebenarnya untuk mengamankan password itu sendiri. Namun ada kalanya kita ingin mengetahui apakah karakter yang kita ketik sudah benar atau belum. Oleh karena itu terkadang programmer membuatkan sebuah fitur dimana kita bisa menampilkan password tersebut.
Untuk menampilkan karakter tersembunyi yang ada pada input password tersebut bisa dengan mudah dilakukan dengan bantuan Javascript. Programmer web tentu harus paham trik ini, sekali lagi, salah satu kegunaannya adalah untuk membantu pengguna dalam memastikan apakah password yang dia tulis sudah benar atau belum.
Oke langsung saja kita coba membuatnya.
Struktur form dengan HTML
Pertama buat dulu struktur form nya di HTML, untuk demo ini kita hanya butuh satu text field untuk mengisi password, kemudian dua buah tombol untuk menampilkan password dan menyembunyikan password.
Styling dengan CSS
Agar form terlihat menarik tambahkan script CSS berikut ini
Fungsi Javascript untuk membuat show hide password
Kemudian agar password bisa ditampilkan dan disembunyikan maka kita membutuhkan dua buah function seperti berikut ini.
Script diatas sebenarnya hanya berfungsi untuk merubah tipe field dari form input yang memiliki ID #mypass menjadi bertipe text atau password. Ketika input field nya bertipe text maka tulisan akan ditampilkan, namun ketika berubah menjadi tipe password maka tentu saja teks akan berganti menjadi karakter tertentu.
Apabila Anda tertarik ingin mencoba bisa lihat demonya atau downlaod script nya dibawah ini
Semoga trik singkat membuat show hide password dengan javascript ini bisa berguna untuk mempermudah pekerjaan Anda atau menambah pengetahuan.
gan kalo mau buat icon passwordnya jadi (*) bintang gimana ya?