Membuat Icon Lihat Password dengan jQuery

Kita sering kali saat membuka halaman website sosial media akan melihat sebuah kolom form untuk pengisian username dan password untuk login. Karena untuk bisa menggunakan sosial media tersebut diwajibkan mendaftar terlebih dahulu agar data kita terlacak oleh website tersebut. Salah satu cara untuk mengetahuinya adalah tidak lain menggunakan form login. Saat pengisian data username dan password terkadang kita sering salah pengisian untuk password. Letak kesalahanya biasanya karena ada typo pada penulisan. Karena berbentuk password jadi kita sendiri tidak tahu apa yang sedang kita tulis sehingga jika salah penulisan kita akan mengulanginya dari awal.

Sesuai dengan contoh kasus diatas, kita akan belajar bagaimana cara membuat icon lihat password dengan jQuery. Fungsinya adalah kita bisa memastikan apakah password yang kita tulis sudah benar dengan cara melihat langsung karakter passwordnya. Dengan adanya fitur ini diharapkan dapat meminimalisir kesalahan input password, cukup tekan iconnya maka password akan bisa kita lihat.

Bagaiamana cara membuatnya ?

Kalian bisa ikuti langkah-langkah berikut ini. Pertama kalian bisa salin contoh code seperti dibawah ini.

lihat.html
<html>
<head>
	<meta charset="UTF-8">
	<title>Lihat Password</title>
	<link rel="stylesheet" href="font-awesome.css">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
</head>
<body>
	
		<input type="text" name="user" placeholder="username"> <br>
		<input type="password" name="pass" placeholder="password" id="pass"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>		
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script>
		$(document).ready(function(){
		    $(".glyphicon").click(function(){		    	
		    	if ($(this).hasClass("glyphicon-eye-open")==true) {
		    		$("#pass").attr("type", "text");		    	   	
		    	   	$(this).removeClass("glyphicon glyphicon-eye-open");
		    	   	$(this).addClass("glyphicon glyphicon-eye-close");
		    	    
		    	} else {
		    		$("#pass").attr("type", "password");
		    	    $(this).removeClass("glyphicon-eye-close");
		    	   	$(this).addClass("glyphicon-eye-open");		    	   	
		    	}		        
		    });
		});
	</script>
</body>
</html>

Setelah sudah kalian simpan filenya dengan format HTML. Untuk melihat hasilnya kalian bisa buka file tersebut dengan browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

Membuat Icon Lihat Password dengan Jquery

Gambar diatas adalah form dengan tampilan seperti biasanya. Kalian bisa coba isi username dan passwordnya terlebih dahulu, setelah itu kalian bisa klik icon disamping itu dan lihat apa yang terjadi.

Membuat Icon Lihat Password dengan Jquery

Membuat Icon Lihat Password dengan Jquery

Kolom password berubah menjadi seperti kolom teks sehingga karakter password yang telah kita tulis akan terlihat. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat icon lihat password dengan jQuery. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *