Cara Membuat Show Password Menggunakan Javascript
Halo teman-teman di panduan kali ini saya akan membahas mengenai Cara Membangun Show Password Menggunakan Javascript, show password adalah sebuah alat bantu atau sebuah fitur yang berfungsi bagi memunculkan sebuah karakter yang terdapat didalam form password, karakter tersebut yang tampil dapat berupa bintang atau titik yang tebal, jadi manfaat dari Show password ini yaitu bagi menampilkan isi dari form tersebut, sehingga ketika user ingin mengerjakan login ataupun register di sebuah form tak terjadi kesalahan inputan di password tersebut.Alur kerja dari show password ini yaitu dimana di ketika kita ingin mengetahui bahwa password yang kita masukan benar atau tak, kita dapat mengklik di show password, karenanya karakter yang terdapat di form tersebut akan ditampilkan.
Nah biar teman-teman lebih paham lagi mengenai show password kita seketika saja masuk ke study casenya mengenai Cara Membangun Show Password Menggunakan Javascript.
langkah pertama-tama Cara Membangun Show Password Menggunakan Javascript, silahkan teman-teman buka text editornya, apabila telah silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!DOCTYPE html>
<html >
<head>
<meta charset=UTF-8>
<title>Cara Membangun Show Password Menggunakan Javascript</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class=container>
<p>Cara Membangun Show Password Menggunakan Javascript</p>
<input class=active type=text placeholder=username>
<div class=satu>
<input type=password class=active id=pswd placeholder=Masukan Password>
<div class=group1>
<input type=checkbox id=chk>
<label id=showhide class=label>Show Password</label>
</div>
</div>
<div class=dua>
<input class=active type=password id=pswd2 placeholder=Ulangi Password>
<div class=group>
<i id=icon class=fa fa-eye-slash></i>
</div>
</div>
</div>
<script src=show.js></script>
</body>
</html>
langkah berikutnya kita akan membangun file JavaScriptnya dan silahkan teman-teman simpan script dibawah ini dengan nama show.js
// proses 1
var masukanpass = document.getElementById('pswd'),
chk = document.getElementById('chk'),
label = document.getElementById('showhide');
chk.onclick = function () {
if(chk.checked) {
masukanpass.setAttribute('type', 'text');
label.textContent = 'Hide Passowrd';
} else {
masukanpass.setAttribute('type', 'password');
label.textContent = 'Show Passowrd';
}
}
// proses 2
var input = document.getElementById('pswd2'),
icon = document.getElementById('icon');
icon.onclick = function () {
if(input.className == 'active') {
input.setAttribute('type', 'text');
icon.className = 'fa fa-eye';
input.className = '';
} else {
input.setAttribute('type', 'password');
icon.className = 'fa fa-eye-slash';
input.className = 'active';
}
}
langkah yang terakhir kita akan membangun style nya, dan silahkan teman-teman simpan script dibawah ini dengan nama style.css
* {
margin: 0;
padding: 0;}
body {
background: #90C59A;
}
.container {
width: 350px;
margin:10px auto;
padding: 30px;
background: #40E8F5;
border-radius: 5px;
border: 1px solid #c5c4c4;
color: #5a5757;
}
p {font-size: 20px; text-align: center;}
.active, input[type='text'] {width: 350px;
height: 35px;
margin: 10px 0 0 0;}
.group {position: relative;}
.fa {position: absolute;
bottom: 12px;
float: right;
left: 324px;
cursor: pointer;
}berikutnya silahkan di save seluruh file nya, apabila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Silahkan Klik bagi Demo
Bagai mana teman-teman lumayan gampang bukan Cara Membangun Show Password Menggunakan Javascript-nya, demikianlah dulu panduan saya kal ini mengenai Cara Membangun Show Password Menggunakan Javascript.
Semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
