Show and Hide Password Using JQuery
Show and Hide Password Using JQuery
Published Nov 22,2020 by Kailash Singh
0 Comment 1890 Views
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
Comments ( 0 )
SEARCH POST HERE
Click to Join
