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="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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.

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

5. Enable the plugin.

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

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'

Changelog:

2017-12-10

2017-10-17

  • Update to 1.1.1

2016-06-02

  • 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.