Toggle Password Visibility using jQuery

Submitted by nurhodelta_17 on Saturday, January 20, 2018 - 14:25.
This is the step by step procedure in this tutorial:

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">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Add style

Include the following style. 
  1. #myInput{
  2. 	font-size: 1em;
  3.   	padding: 1em;
  4. }

Add the Input

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

Adding our jQuery Script

Last step is to add our jquery script. 
  1. $(document).ready(function(){
  2. 	$('#showBtn').click(function(){
  3. 		var type = $('#myInput').attr('type');
  4. 		if(type == 'password'){
  5. 			$('#myInput').attr('type', 'text');
  6. 			$('#btnText').text('Hide');
  7. 			$('#showBtn').removeClass('btn-primary').addClass('btn-default');
  8. 			$('#icon').removeClass('fa-eye').addClass('fa-eye-slash');
  9. 		}
  10. 		else{
  11. 			$('#myInput').attr('type', 'password');
  12. 			$('#btnText').text('Show');
  13. 			$('#showBtn').removeClass('btn-default').addClass('btn-primary');
  14. 			$('#icon').removeClass('fa-eye-slash').addClass('fa-eye');
  15. 		}
  16. 	});
  17. });

Full HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>Toggle Password Visibility using jQuery</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. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  9. 	<style type="text/css">
  10. 		#myInput{
  11. 			font-size: 1em;
  12.   			padding: 1em;
  13. 		}
  14. 	</style>
  15. </head>
  16. <body>
  17. <div class="container">
  18. 	<h1 class="page-header text-center">Toggle Password Visibility using jQuery</h1>
  19. 	<div class="row">
  20. 		<div class="col-sm-4 col-sm-offset-4">
  21. 			<input type="password" id="myInput"> <button type="button" class="btn btn-primary" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>		
  22. 		</div>
  23. 	</div>
  24. </div>
  25. <script type="text/javascript">
  26. 	$(document).ready(function(){
  27. 		$('#showBtn').click(function(){
  28. 			var type = $('#myInput').attr('type');
  29. 			if(type == 'password'){
  30. 				$('#myInput').attr('type', 'text');
  31. 				$('#btnText').text('Hide');
  32. 				$('#showBtn').removeClass('btn-primary').addClass('btn-default');
  33. 				$('#icon').removeClass('fa-eye').addClass('fa-eye-slash');
  34. 			}
  35. 			else{
  36. 				$('#myInput').attr('type', 'password');
  37. 				$('#btnText').text('Show');
  38. 				$('#showBtn').removeClass('btn-default').addClass('btn-primary');
  39. 				$('#icon').removeClass('fa-eye-slash').addClass('fa-eye');
  40. 			}
  41. 		});
  42. 	});
  43. </script>
  44. </body>
  45. </html>
That ends this tutorial. Happy Coding :)

Tags

Add new comment

About text formats
  • 68 views