Bootstrap Show/Hide Toggle Password Input Field Example
Sometimes, we may require to hide show password input field so, user can see what he written in password in register form or any other form. So, If you used Bootstrap framework then you can simply do it by using bootstrap-show-password.js plugin.
Bootstrap show Password plugin give us to good layout and with we can also custom set class when password hide or show. We can also set toggle hide show password input field.
In this full example i use bootstrap-show-password.js plugin for hide show password field. You can sole use this example simply by bellow small example.
Preview:
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>
Ok, you can copy bellow code and run in your machine OR also you can check demo by click on eye icon.
You can get more information about bootstrap-show-password plugin from here : Click Here.
Maybe It can help you...
