Show and Hide Password Using JQuery

In this tutorial, we are going to create how to create Show and Hide Password Using JQuery.

Step 1: Include jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Complete Code :-

<!DOCTYPE html>

<html>

<head>

	  <title>Show and Hide Password Using JQuery</title>

	  <meta charset="utf-8">

	  <meta name="viewport" content="width=device-width, initial-scale=1">

	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body> 	

	<h2>Show and Hide Password Using JQuery</h2>

	<label>Enter Password</label>

	<input type="password" id="password" class="form-control" placeholder="********">

	<p id="show_hide" style="font-size: 14px;">Show Password</p>

</div>

</body>

<script type="text/javascript">

  $(document).ready(function(){

     $('#show_hide').click(function(){

        var pass = $('#password');

        var passShow = pass.attr('type'); //get input type

        if(passShow == 'password'){ //check type is equal to password

          pass.attr('type','text'); //change type password to text

          $(this).text('Hide Password'); //change show password text to hide password

        }
        else{

          pass.attr('type','password'); //change type text to password

          $(this).text('Show Password'); //change hide password text to show password

        }

      })

  });

</script>

</html>

Hope this will help our developers