How to Show/Hide Password input field by using bootstrap-show-password.js

Today now in this post i will show you How to Show/Hide Password input field by using bootstrap-show-password.js? Sometimes, you may need to hide and show the password input field. Because the user can see what he/she written as password in the register form or any other form. So, If we are used Bootstrap framework then we can do this very simply by using the bootstrap-show-password.js plugin.

Bootstrap show Password plugin is give us a good layout also with we can custom by set class when password is hide or show. So you can also set the toggle hide show password input field.

In now this full an example i will use bootstrap-show-password.js plugin for the hide and show the password field. We can easily solve this by using this example step by step:

Example:
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Hide Show Password</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
</head>
<body

<div class="container">
	<form>
		<div class="form-group">
			<label>Username:</label>
			<input type="text" name="username" class="form-control">
		</div>
		<div class="form-group">
			<label>Password:</label>
			<input type="password" id="password" name="password" class="form-control" data-toggle="password">
		</div>
		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>
	</form>
</div>
<script type="text/javascript">
	$("#password").password('toggle');
</script>
</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →