Jurnal Web .com

Cara menampilkan dan menyembunyikan password pada form html dengan javascript (show hide password) — Ketika kita hendak login ke sebuah sistem biasanya diharuskan untuk memasukan password, atau ketika ketika mendaftar / register, kita juga diminta untuk menentukan password yang kita inginkan.

Biasanya setiap hendak menginput pada bagian password tersebut, selalu saja karakternya disembunyikan, baik itu diganti dengan tanda bintang ‘***’ atau bulat  ‘•••’ , sehingga kita tidak mengetahui apasih yang sebenarnya kita ketik. Ini sebenarnya untuk mengamankan password itu sendiri. Namun ada kalanya kita ingin mengetahui apakah karakter yang kita ketik sudah benar atau belum. Oleh karena itu terkadang programmer membuatkan sebuah fitur dimana kita bisa menampilkan password tersebut.

Salah satu contoh form password (Image: welovesolo.com)

Untuk menampilkan karakter tersembunyi yang ada pada input password tersebut bisa dengan mudah dilakukan dengan bantuan Javascript. Programmer web tentu harus paham trik ini, sekali lagi, salah satu kegunaannya adalah untuk membantu pengguna dalam memastikan apakah password yang dia tulis sudah benar atau belum.

Oke langsung saja kita coba membuatnya.

Struktur form dengan HTML

Pertama buat dulu struktur form nya di HTML, untuk demo ini kita hanya butuh satu text field untuk mengisi password, kemudian dua buah tombol untuk menampilkan password dan menyembunyikan password.

<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>

Styling dengan CSS

Agar form terlihat menarik tambahkan script CSS berikut ini

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;
}

Fungsi Javascript untuk membuat show hide password

Kemudian agar password bisa ditampilkan dan disembunyikan maka kita membutuhkan dua buah function seperti berikut ini.

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";
	}
}

Script diatas sebenarnya hanya berfungsi untuk merubah tipe field dari form input yang memiliki ID #mypass menjadi bertipe text atau password. Ketika input field nya bertipe text maka tulisan akan ditampilkan, namun ketika berubah menjadi tipe password maka tentu saja teks akan berganti menjadi karakter tertentu.

Apabila Anda tertarik ingin mencoba bisa lihat demonya atau downlaod script nya dibawah ini

DEMO | DOWNLOAD SCRIPT

Semoga trik singkat membuat show hide password dengan javascript ini bisa berguna untuk mempermudah pekerjaan Anda atau menambah pengetahuan.

Artikel Lain:

Kunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool Cara Menampilkan File PDF di Website dengan HTML Cara Membuat Background Slideshow dengan Jquery Tutorial Cara Upload Foto dengan AJAX dan PHP (jQuery) Cara Mendapatkan Ranking Alexa dengan PHP Cara Embed Video YouTube Responsive, Efisien & Tidak Berat Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery Membuat tombol scroll ke atas (back to top) dengan jQuery Cek Ketersediaan Data Username dengan AJAX jQuery PHP Tips Menjadi Developer Javascript 10+ Website Untuk Belajar jQuery 9 Skill Utama yang Harus Dimiliki Front-End Developer