Membuat password Show / Hide Checkbox Click dengan JQuery -->

Membuat password Show / Hide Checkbox Click dengan JQuery

Advertisement



Advertisement

              Banyak sekali efek yang disediakan oleh JQuery dan banyak pula plugin yang tersedia yang telah disediakan oleh para Suhu Programmer JQuery yang dimana kita tidak dipusingkan lagi dengan adanya kode panjang atau dalam artian long tail kode .

          Tidak demikian dengan salah satu Kode yang akan saya bagikan ini tidak menggunakan plugin sama sekali, dikarenakan skrip yang sedikit dan manual koding. Untuk masalah kodenya tidak usah kawatir Error atau semacamnya, dikarenakan sudah saya testing sendiri dan hasilnya rumayan memuasakan .

       Pernahkah anda melihat sebuah website yang menggunakan cara seperti pada postingan ini, tentunya banyak sekali kita melihat dari sekian website seperti halnya rumah123, dkk .

 Mereka menggunakan Show Password pada Checkbox untuk menampilkan Input Type Password sebagai Type Text dan tentunya sangat mudah bagi pengguna untuk mengeja kembali password mereka .
password show hide checkbox click

Prinsip kerjanya seperti ini,

Mula - mula checkbox dalam keadaan default dan kemudian anda mengisi sesuatu pada kolom Input Type Password, memang pertamanya nilai / valuenya tidak akan tampil, dalam artian menampilkan value bulat - bulat hitam / character, Tetapi setelah anda klik Checkbox show password, maka otomatis input type password tadi akan di ganti dengan Type="text"dan value pada password akan tertampil rapi serupa halnya dengan input Type=text .

Bagaimana untuk kodenya ?

Kita cukup buat form simpel saja, 1 form 2 inputan dan 1 checkbox .

Pastikan sudah terinclude jquery lebih awal, dikarenakan dalam tahapan ini akan ada script jquery sebagai penjalanya . Belum tahu cara memasang jquery, Baca : Pengertian JQuery dan fungsinya .

Buat form terlebih dahulu,
Username : <input type="text" name="username"><br>
Password : <input type="" name="password"><br>
<input type="checkbox" id="showPass"> Show password<br>

Script jquery,
$(function(){
$("#showPass").click(function(){ // #showPass -> id Checkbox
if($("[name=password]").attr('type')=='password'){
$("[name=password]").attr('type','text');
}else{
$("[name=password]").attr('type','password');
}
});
}); // indonesiakode.blogspot.com

Pada saat tombol di klik yaitu dengan id #showPass, maka jika atrribut name=password mempunyai tipe password, maka input type password tadi akan berubah menjadi type text dan text akan tampil, berbalik pula dengan jika di klik kembali pada id #showPass, maka  akan terset ulang kembali ke type=password .


Selamat mencoba .

Tanyakan jika ada cara lain atau bug, bisa anda publish di komentar di bawah .
Advertisement


Advertisement
LihatTutupKomentar