Show/Hide Password Field Text with jQuery and Bootstrap

Show/Hide Password Field Text with jQuery and Bootstrap
File Size: 10.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Show Password is a jQuery plugin that allows the visitor to toggle the password input field text visibility by clicking the toggle icon/checkbox. Styling with Twitter's Bootstrap 2/3.

See also:

How to use it:

1. Include the Bootstrap 2 or Bootstrap 3 framework on the web page.

<link rel="stylesheet" href="">
<script src=""></script>

2. Include the boostrap show password plugin after JQuery javascript library.

<script src=""></script>
<script src="password.js"></script> 

3. Create a password input field on the page.

<input id="password" class="form-control" type="password" value="123" placeholder="password" />

4. Create a checkbox to toggle the password text visibility.

<input id="methods" type="checkbox"/>
Show password

5. Enable the plugin.

$(function() {
  $('#password').password().on('', function(e) {
    $('#methods').prop('checked', true);
    }).on('', function(e) {
      $('#methods').prop('checked', false);
    $('#methods').click(function() {

6. All default options.

placement: 'after', // 'before' or 'after'
white: false, // v2
message: 'Click here to show/hide password',
eyeClass: 'glyphicon',
eyeOpenClass: 'glyphicon-eye-open',
eyeCloseClass: 'glyphicon-eye-close'




  • Update to 1.1.1


  • Update to 1.0.3

This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.