jQuery and Bootstrap show hide password plugin

A nice addition for password inputs in forms – Bootstrap show hide password plugin, powered by jQuery.

Bootstrap show hide password

It’s a jQuery plugin, that allows the user to toggle the password input field text visibility by clicking the toggle icon (checkbox). Styling with Twitter’s Bootstrap v2 and / or v3.

Bootstrap show / hide password plugin example
Bootstrap show / hide password plugin example

Basic usage

The plugin acts on input elements (typically password fields):

<input id="password" class="form-control" type="password"
  data-toggle="password">

We can use it via data attributes:

<input data-toggle="password">

or via JavaScript:

$('#password').password();

Methods

.password(‘show’) – manually show the password

$('#password').password('show');

.password(‘hide’) – manually hide the password

$('#password').password('hide');

.password(‘toggle’) – manually toggle the password

$('#password').password('toggle');

.password(‘val’, [value]) – get the current value of the password or set the value of password

$('#password').password('val'); // get value
$('#password').password('val', 'password'); // set value

There are also customizable parameters and events to use.

For example:

$('#password').on('show.bs.password', function (e) {
    // code here
});

More in a small documentation @ GitHub.

License: MIT

Demo:

http://wenzhixin.net.cn/p/bootstrap-show-password

Get Bootstrap show hide password plugin from GitHub:

https://github.com/wenzhixin/bootstrap-show-password

You may also like:

jQuery show and hide password plugin

jQuery password generator with strength meter – pwdMeter

Create a beautiful password strength meter

Enjoy!

Share:Share on Facebook5Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1