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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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.
We are Recommending you
- How to Remove All Spaces from String in JQuery?
- Bootstrap - Input multiple tags example using Tag Manager Jquery Plugin
- Bootstrap Maxlength Validation with Count Remaining Characters Example
- Bootstrap Multiple Select with Checkboxes using Bootstrap-multiselect.js JS
- JQuery Accordion using JQuery UI Example
- Bootstrap Animated Progress Bar using Bootstrap-progressbar JS
- Bootstrap SweetAlert Confirm Dialog Box Model Example
- Bootstrap Color Picker using Mjolnic Colorpicker Example
- JQuery Hide and Show Password using Eye Icon Example
- JQuery Chosen Multi Select Dropdown Example
- JQuery Bootbox Modal Dialog Prompt Example
- JQuery Tag Input Plugin Example Code
- Preview an image before Upload using jQuery Example
- Bootstrap Timepicker using Datetimepicker JS Example