Cara Menampilkan dan Menyembunyikan Password dengan Javascript

Hai, jumpa lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial mengenai bagaimana Cara Menampilkan Dan Menyembunyikan Password Dengan Javascript, ketika kita mau login tentu kita harus memasukan username dan password nya, Nah pada saat kita memasukan password pasti password nya di hide atau karakternya di ubah menjadi simbol bintang, kita tentu ingin tau apakah password nya sesuai atau tidak, Nah kali ini saya akan kasih tips bagaimana password yang kita masukan bisa dicek terlebih dahulu, bagaimana caranya, cekidot!

1. Buka dulu teks editornya, kemudian ketika kode HTML berikut ini.

<form action="#" class="jw-form">
	<input type="text" value="" id="myuser" placeholder="Username"><br>
	<input type="password" value="" id="mypass" placeholder="Password"><br>
	<input type=button id="show" value="Show Password" onclick="ShowPassword()">
	<input type=button style="display:none" id="hide" value="Hide Password" onclick="HidePassword()">
</form>

2. Selanjutnya kita akan mempercantik dulu tampilan form login dengan CSS, ketikan kode CSS berikut.

header{
	margin: 30px auto;
	text-align: center;
	color: #333;
}
header h1{
	font-size: 20px;
}
header h4{
	font-size: 16px;
}
form{
	max-width: 300px;
	margin: 50px auto;
	padding: 20px;
	background: #f4f7f8;
	border-radius: 8px;
	border: 1px solid #d4f7f8;
}
input[type="text"],
input[type="password"]{
	border: 1px solid #d4f7f8;
	padding: 15px;
	font-size: 17px;
}
input[type="button"]{
	margin-top: 10px;
	border: none;
	padding: 5px;
	font-size: 13px;
}

3. Kalo sudah, kita akan membuat fungsi menampilkan dan menyembunyikan password, caranya ketikan kode javascript berikut.

function ShowPassword()
{
	if(document.getElementById("mypass").value!="")
	{
		document.getElementById("mypass").type="text";
		document.getElementById("show").style.display="none";
		document.getElementById("hide").style.display="block";
	}
}

function HidePassword()
{
	if(document.getElementById("mypass").type == "text")
	{
		document.getElementById("mypass").type="password"
		document.getElementById("show").style.display="block";
		document.getElementById("hide").style.display="none";
	}
}

4. Setelah itu jangan lupa disimpan, kemudian coba jalankan di browser nya, dan lihat hasilnya. Selesai

Bagaimana, cukup mudah yah buat nya 🙂 silahkan kalian modifikasi lagi, selesai sudah tutorial mengenai bagaimana Cara Menampilkan Dan Menyembunyikan Password Dengan Javascript, semoga bermanfaat, amin.

Selamat mencoba.