Tombol Lihat Password dengan Jquery

Pada saat kita memasukin suatu website besar seperti sosial media, pasti kita akan dihadapkan oleh suatu tampilan form untuk memasuki proses login. Pada proses login ini biasanya kalian akan mengisikan username dan password. Pada bagian kolom password tersebut sering kita jumpai logo icon berbentuk mata yang pada saat kita tekan maka isi teks pada kolom password akan terlihat jelas huruf karakternya. Ya, kita akan membuat fungsi tersebut yaitu membuat tombol lihat password dengan Jquery.

Tombol lihat password baru-baru ini sering kita jumpai pada website sosial media, khususnya untuk tampila mobile. Tujuanya adalah untuk memeriksa kembali apakah password yang kita inputkan sudah benar. Karena terkadang kita sering lupa karena terlalu cepat saat mengetik. Apalagi jika lewat handphone yang jarak keyboardnya cukup berdekatan sehingga rawan salah ketik. Maka dari itulah muncul ide untuk membuat tombol lihat password. Cara membuatnya cukup mudah, kalian bisa ikuti contoh code berikut ini.

layout.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Lihat Password</title>
</head>
<body>
	
		<input type="text" name="user" placeholder="username"> <br>
		<input type="password" name="pass" placeholder="password" id="pass"> <button>Show Password</button>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
		    $("button").click(function(){		    	
		    	if ($(this).html()==="Show Password") {
		    		$("#pass").attr("type", "text");
		    	   	$(this).html("Hide Password")
		    	    
		    	} else {
		    	    $("#pass").attr("type", "password");
		    	    $(this).html("Show Password")
		    	}		        
		    });
		});
	</script>
</body>
</html>

Setelah sudah kalian simpan filenya. Untuk melihat hasilnya kalian cukup buka file tersebut di browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

 

tombol-lihat-password-dengan-jquery-rangga1-270817

Kita bisa lihat pada gambar diatas adalah tampilan awal. Sekarang kalian bisa coba isikan data pada dua kolom tersebut sehingga seperti gambar dibawah ini.

tombol-lihat-password-dengan-jquery-rangga2-270817

Pada kolom password tidak nampak karakter apa yang kita isi. Jika kalian tekan tombol show password maka hasilnya akan seperti ini.

tombol-lihat-password-dengan-jquery-rangga3-270817

Teks untuk password berubah menjadi teks biasa, karakternya muncul dan juga terjadi perubahan kata pada tombolnya untuk memberi tahu jika tombolnya dalam keaddan show password. Jika kalian tekan kembali tombol tersebut, maka teks password akan kembali seperti awal.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat tombol 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 *