Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery
HobbyTekno - Pada postingan kali ini Admin akan membahas cara Membuat Tombol Show Password menggunakan jQuery. Tombol ini sudah umum kita temukan pada Website-website besar contohnya Facebook, dan lain sebagainya. Event yang akan kita gunakan adalah attr, yaitu mengubah attribut elemen yang kita seleksi nantinya. Langsung saja berikut langkah-langkahnya.
Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery
1. Pastikan File jQuery ada dalam Folder Project anda atau gunakan CDN jQuery secara online.
2. Buat file .html, Buat Form Login seperti kode berikut. Kali ini saya akan menggunakan CDN Bootstrap juga (online)
<!DOCTYPE html>3. Buat file dengan nama style.css, ketik kode seperti berikut ini.
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery</title>
</head>
<body>
<div class="card">
<div class="card-body">
<h3>Form Login</h3>
<form action="">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password">
</div>
<input type="checkbox" id="checkbox"> Show Password
<hr>
<button class="btn btn-primary w-100">Login</button>
</form>
</div>
</div>
</body>
</html>
.card {4. Buat file dengan nama script.js, ketik kode seperti berikut
border-radius: 12px;
border: 2px solid #eee;
margin: auto;
margin-top: 120px;
padding: 50px;
width: 450px;
}
$(document).ready(function () {Penjelasan : Pada saat input dengan id "#checkbox" di klik, lalu cek apakah #checkbox dalam keadaaan dicentang atau tidak, jika iya maka ubah attribut #password menjadi text. jika tidak maka ubah attribut #password menjadi password. Jika anda belum mengerti silahkan baca artikel Tutorial jQuery sebelumya di HobbyTekno.
$('#checkbox').click(function () {
if ($(this).is(':checked')) {
$('#password').attr('type', 'text');
} else {
$('#password').attr('type', 'password');
}
})
})
5. Coba masukkan username dan password, lalu cek dengan cara mencentang / klik pada checkbox disamping Show Password.
Hasilnya akan jadi seperti berikut
Sekian Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar
No comments for "Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery"
Post a Comment