Pada kesempatan kali ini saya akan menjelaskan cara membuat show/hide password dengan jquery. Mungkin sebagian dari teman-teman sudah tahu di feature form login website-website pada umumnya terdapat feature show password dan hide password yang ditandai dengan icon mata atau font-awesome fa-eye-slash. Namun perlu teman-teman ketahui sebelumnya, input yang memiliki attribute type password akan menampilkan isi dari text input password tersebut dalam bentuk bulat-bulat kecil dan bukan berupa text biasa pada umumnya. Dan pada contoh disini saya akan membuat isi dari input tersebut bisa berubah menjadi text biasa dan cara kerjanya apabila dari icon tersebut di klik maka akan merubah input type password tersebut menjadi text sehingga tampilan di input tersebut ke dalam bentuk text. Untuk membuatnya kalian bisa ikuti tahapan seperti dibawah ini.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
- Ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Membuat Show/Hide Password Dengan Ajax</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<style>
#view_pass{
float: right;
margin-right: 10px;
margin-top: -25px;
position: relative;
z-index: 2;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mx-auto">
<div id="first">
<div class="myform form ">
<div class="logo mb-3">
<div class="col-md-12 text-center">
<h1>Login</h1>
</div>
</div>
<form action="" method="post" name="login">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Password</label>
<input type="password" name="password" id="password" class="form-control active" placeholder="Enter Password">
<span class="fa fa-eye-slash" id="view_pass"></span>
</div>
<div class="form-group">
<button type="submit" class=" btn btn-block mybtn btn-primary tx-tfm">Login</button>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).on('click', '#view_pass', function(e) {
e.preventDefault();
var password = $("#password").val();
if($("#password").hasClass("active")) {
$("#password").attr('type', 'text');
$("#password").removeClass("active");
} else {
$("#password").attr('type', 'password');
$("#password").addClass("active");
}
});
</script>
- Jika sudah selanjutnya simpan file index.html tersebut dan lihat hasilnya di browser teman-teman.
Sampai disini penjelasan saya mengenai cara membuat show/hide password dengan jquery, semoga bermanfaat.