Membuat Fungsi Lihat Password dengan Jquery
Pernah mencoba ketika kita masukan password di sebuah inputan bertype password karenanya hasilnya inputan password kita akan beribah menjadi titik titik beras pada arti menjadi tak terlihat inputan yang kita masukan, nah selain itu kita pun pernah mungkin memasukan password tapi dapat 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. Seketika 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 bikin guna 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 bagi stylenya kita bikin file CSS nya bagi menghiasi program 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%;
}
}karenanya hasilnya akan seperti di bawah ini.
bila kalian masukan password dan tombol lihat password di klik karenanya fungsinya akan berhasil..
demikian panduan Membuat Fungsi Lihat Password dengan Jquery, semoga bermanfaat.. 😀
Sumber https://kursuswebsite.org
