Show and Hide Password Using JQuery

Kailash Singh

Show and Hide Password Using JQuery

Published Nov 22,2020 by Kailash Singh

0 Comment     1330 Views    

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


Step 1: Include jQuery

<script src=""></script>


Complete Code :-

<!DOCTYPE html>



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

	  <meta charset="utf-8">

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

	  <script src=""></script>



	<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>



<script type="text/javascript">



        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


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

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







Hope this will help our developers


Comments ( 0 )