September 5, 2020
Category : Javascript
HTML
jQuery
Jquery - Show hide password in Password textbox using checkbox.
In this post we can implement how to add hide show password when user input password at register time or login time. We sometimes require to do it because that use can determine password is right or wrong.
In this example i use just jquery change event on checkbox, if check then user can see his entered password and change anything, so you can see preview and also check demo with code.
Preview:
Example:
<html lang="en">
<head>
<title>Jquery - Show hide password in Password textbox using checkbox</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="container">
<h2>Jquery - Show hide password in Password textbox using checkbox</h2>
<input type="password" class="form-control my-password" name="password" />
<input type="checkbox" class="showPassword" />Show Password</div>
<script type="text/javascript">
$(document).ready(function(){
$('.showPassword').on('change',function(){
var isChecked = $(this).prop('checked');
if (isChecked) {
$('.my-password').attr('type','text');
} else {
$('.my-password').attr('type','Password');
}
});
});
</script>
</div>
</body>
</html>
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
