Pada judul artikel ini mungkin sedikit membingungkan, yang dimaksud show hide disini bukanlah menampilkan atau menyembunyikan form password dilayar browser.
Melainkan kita merubah karakter dari form password, semisalkan jika sebuah tag input bertipe password maka akan menampilkan tanda bintang (*).
Maka kita akan merubah tanda bintang (*) menjadi tulisan biasa atau bertipe text ketika checkbox diklik.
Artikel terkait: Cara show hide form password dengan JavaScript
Perhatikan gambar berikut:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara show hide form password dengan jQuery</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<center><h1>Cara show hide form password dengan jQuery</h1></center>
<div class="form-inline col-sm-6 mx-auto mt-5">
<label for="pass">Password</label>
<input type="password" name="password" id="password" class="form-control ml-2 mr-2">
<input type="checkbox" id="show-password"> Tampilkan Password
</div>
</div>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show-password').click(function(){
if($(this).is(':checked')){
$('#password').attr('type','text');
}else{
$('#password').attr('type','password');
}
});
});
</script>
</body>
</html>
Outputnya akan seperti gambar diatas.
Penjelasan:
Kita memberikan event klik pada checkbox dengan menuliskan kode
$('#show-password').click(function().
Bedanya pada tutorial cara show hide password dengan JavaScript kita memberikan eventnya pada tag input seperti
onclick="myFunction".
Kemudian kita cek apakah checkbox aktif ataukah tidak dengan menggunakan kode berikut:
Jika checkbox aktif maka ubah atribut pada input dengan id password ke type 'text', sebaliknya jika checkboxnya tidak aktif maka ubah atributnya menjadi password.
Baca juga:
Menghitung denda perpustakaan dengan PHP
if($(this).is(':checked')){
$('#password').attr('type','text');
}else{
$('#password').attr('type','password');
}
Jika checkbox aktif maka ubah atribut pada input dengan id password ke type 'text', sebaliknya jika checkboxnya tidak aktif maka ubah atributnya menjadi password.
Baca juga:
Menghitung denda perpustakaan dengan PHP
0 Komentar