Membuat Fungsi Lihat Password dengan Jquery

Pernah mencoba ketika kita masukan password di sebuah inputan bertype password maka hasilnya inputan password kita akan beribah menjadi titik titik beras dalam arti menjadi tak terlihat inputan yang kita masukan, nah selain itu kita juga pernah mungkin memasukan password tapi bisa kita lihat inputan kita atau di pinggir inputan password kita ada tombol lihat password contohnya, nah kali ini kita akan mempelari hal tersebut yaitu bagaimana Membuat Fungsi Lihat Password dengan Jquery. Langsung saja kita praktekan teman teman.

<!DOCTYPE html>
<html>
<head>
	<title>Lihat Password</title>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<h2>Lihat Password </h2>

<div class="form">
  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname">
    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="pass" id="pass"> <button>Lihat Password</button>
  </div>
  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Submit</button>
    <span class="psw">Lupa <a href="#">password?</a></span>
  </div>
</div>
</body>
</html>

kita buat fungsi lihat password di bawah ini, ketikan kode di bawah ini tepat setelah tag penutup div terakhir.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
if ($(this).html()===”Lihat Password”) {
$(“#pass”).attr(“type”, “text”);
$(this).html(“Sembunyikan Password”);
$(this).css({
background: ‘blue’,
color: ‘white’
});

} else {
$(“#pass”).attr(“type”, “password”);
$(this).html(“Lihat Password”);
$(this).css({
background: ‘#049372’,
color: ‘white’
});
}
});
});
</script>

lalu untuk stylenya kita buat file CSS nya untuk menghiasi aplikasi kita. ketikan kode CSS di bawah ini dan beri nama dengan style.css

style.css

*{
    padding: 0; margin: 0;
}
h2{
	color:#50626C;
	text-align: center;
	font-family: arial;
	text-transform: uppercase;
	border: 3px solid #f1f1f1;
	padding: 5px;
	width: 490px;
	margin: auto;
	margin-bottom: 10px;
    margin-top: 20px;
}
.form {
    border: 3px solid #f1f1f1;
    font-family: arial;
    width: 500px;
    margin: auto;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
label{
	color:#50626C;
	text-transform: uppercase;
}
button {
    background-color: #049372;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f03434;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;

}
span{
	color:#50626C;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

maka hasilnya akan seperti di bawah ini.

bila kalian masukan password dan tombol lihat password di klik maka fungsinya akan berhasil..

sekian tutorial Membuat Fungsi Lihat Password dengan Jquery, semoga bermanfaat.. 😀