jQuery - Membuat Bootstrap Show/Hide Password

Show/Hide Password berguna bagi para user untuk mengecek kembali password mereka agar tidak terjadi kesalahan dalam melakukan login.

Disini kita akan mencoba cara mudah untuk membuat bootstrap show/hide password menggunakan jQuery.

Pertama buat form sederhana terlebih dahulu

<label>Username:</label>
<div class="form-group">
 <input type='text' class="form-control" placeholder="Username" />
</div>
<label>Password:</label>
<div class="form-group">
 <input type="password" class="form-control pass" placeholder="Password" />
</div>
<p><label><input id="showhide" type="checkbox"> Show password</label></p>
<div class="form-group">
 <button type="button" class="btn btn-primary btn-block">Login</button>
</div>

Lalu masukan syntax jQuery di atas tag </body>

$(function(){
 $("#showhide").click(function(){
  if($(".pass").attr('type')=='password'){
   $(".pass").attr('type','text');
  }else{
   $(".pass").attr('type','password');
  }
 });
});

Jangan lupa masukan css dan js Bootstrapnya. Jika belum punya bisa download Bootstrap.

(Baca juga: jQuery - Membuat Animasi Auto Typing (Effect))

DEMO

Terima kasih
Enjoy your day !