Untuk artikel kali ini akan dicoba bagaimana caranya menampilkan dan menyembunyikan password dengan menggunakan jQuery.
Fitur ini biasanya terdapat pada form masuk (login) pada sebuah halaman web. Dimana user diberikan kemudahan untuk melihat hasil inputan apakah sudah benar sesuai dengan apa yang diketikkan. Fitur show & hide dapat dilakukan dengan menggunakan javascript, namun lebih mudah dapat menggunakan library jQuery.
Skrip lengkapnya akan tertulis sebagai berikut:
<html>
<head>
<title>Show Hide Password jQuery | YELLOWWEB.ID</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Show Hide Password jQuery | YELLOWWEB.ID</h1>
<div class="box">
<form>
<input class="form-password" type="password" name="passku">
<br/>
<br/>
<input type="checkbox" class="form-checkbox" name="checkku"> Lihat password
<br/>
<br/>
<input class="form-submit" type="submit" value="Masuk" name="submit">
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.form-checkbox').click(function(){
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
</html>
Hasil akhir akan terlihat seperti dibawah ini:
Teman-teman jangan lupa, disini menggunakan library jQuery, maka sertakan dan untuk aktivasinya perlu kita garisbawahi gunakan skrip berikut untuk menjalankan fitur show and hide, lihat dibawah ini:
<script type="text/javascript">
$(document).ready(function(){
$('.form-checkbox').click(function(){
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
Jika kalian sudah pernah mencoba jQuery, pasti tidak asing dengan library jQuery dan aktivasi jQuery.
Demikian tutorial yang sederhana ini, semoga bermanfaat bagi teman-teman sekalin dan terima kasih sampai berjumpa kembali diartikel berikutnya :).