Toggle Password Visibility using Javascript

Submitted by nurhodelta_17 on Saturday, January 20, 2018 - 11:40.
This is the step by step procedure:

Step 1 : Add Dependency

In the header portion of your HTML, add the following: 
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Step 2 : Add Style

Include the following style. 
  1. <style type="text/css">
  2. 	#myInput{
  3. 		font-size: 1em;
  4.   		padding: 1em;
  5. 	}
  6. </style>

Step 3 : Create the Input

Next, we create our input type. 
  1. <input type="password" id="myInput"> <button type="button" class="btn btn-primary" onclick="showPass()" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>

Step 4 : Adding our Script

Last step is to add our javascript code. 
  1. function showPass() {
  2. 	var icon = document.getElementById('icon');
  3. 	var txt = document.getElementById('btnText');
  4. 	var btn = document.getElementById('showBtn');
  5. 	var x = document.getElementById('myInput');
  6. 	if (x.type === 'password') {
  7. 	    x.type = 'text';
  8. 	    btn.className = 'btn btn-default';
  9. 	    txt.innerHTML = 'Hide';
  10. 	     icon.className = 'fa fa-eye-slash';
  11. 	 } else {
  12. 	     x.type = 'password';
  13. 	     btn.className = 'btn btn-primary';
  14. 	      txt.innerHTML = 'Show';
  15. 	      icon.className = 'fa fa-eye';
  16. 	 }
  17. }

Full HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>Toggle Password Visibility using Javascript</title>
  6. 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7. 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8. 	<style type="text/css">
  9. 		#myInput{
  10. 			font-size: 1em;
  11.   			padding: 1em;
  12. 		}
  13. 	</style>
  14. </head>
  15. <body>
  16. <div class="container">
  17. 	<h1 class="page-header text-center">Toggle Password Visibility using Javascript</h1>
  18. 	<div class="row">
  19. 		<div class="col-sm-4 col-sm-offset-4">
  20. 			<input type="password" id="myInput"> <button type="button" class="btn btn-primary" onclick="showPass()" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>		
  21. 		</div>
  22. 	</div>
  23. </div>
  24. <script type="text/javascript">
  25. 	function showPass() {
  26. 		var icon = document.getElementById('icon');
  27. 		var txt = document.getElementById('btnText');
  28. 		var btn = document.getElementById('showBtn');
  29. 	    var x = document.getElementById('myInput');
  30. 	    if (x.type === 'password') {
  31. 	        x.type = 'text';
  32. 	        btn.className = 'btn btn-default';
  33. 	        txt.innerHTML = 'Hide';
  34. 	        icon.className = 'fa fa-eye-slash';
  35. 	    } else {
  36. 	        x.type = 'password';
  37. 	        btn.className = 'btn btn-primary';
  38. 	         txt.innerHTML = 'Show';
  39. 	         icon.className = 'fa fa-eye';
  40. 	    }
  41. 	}
  42. </script>
  43. </body>
  44. </html>

Tags

Add new comment

About text formats
  • 116 views