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
