Show/hide password plugin for twitter bootstrap.
HTML JavaScript
Latest commit cec5ffb Jun 2, 2016 @wenzhixin Update to 1.0.3
Permalink
Failed to load latest commit information.
assets Add showPassword.js and demos. Apr 10, 2014
LICENSE Initial commit Apr 10, 2014
README.md Added Font Awesome (or other custom font) support. Mar 16, 2016
bootstrap-show-password.jquery.json Update to 1.0.3 Jun 2, 2016
bootstrap-show-password.js Update to 1.0.3 Jun 2, 2016
bootstrap-show-password.min.js Update to 1.0.3 Jun 2, 2016
bower.json Update to 1.0.3 Jun 2, 2016
gulpfile.js Update to version 1.0.1 Oct 16, 2014
index.html
package.json Update to 1.0.3 Jun 2, 2016
v2.html Update examples. Oct 23, 2014
v3.html Update examples. Oct 23, 2014

README.md

Bootstrap Show Password

Show/hide password plugin for twitter bootstrap.

Demos

This plugin support bootstrap v2 and bootstrap v3.

Live demo

How to get it

Manual download

Use Releases page or the source.

Bower

bower install bootstrap-show-password

Npm

npm install bootstrap-show-password

Usage

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

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

Via data attributes

<input data-toggle="password">

Via JavaScript

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-message="Show/hide password".

Name Attribute type default description
- data-toggle String password Active password without writing JavaScript.
placement data-placement String after The placement of show/hide icon, can be 'before' or 'after'.
message data-message String Click here to show/hide password The tooltip of show/hide icon.
white data-white Boolean false Show the white icon. (Just work in bootstrap v2)
eyeClass data-eye-class String glyphicon Base eye icon class.
eyeOpenClass data-eye-open-class String glyphicon-eye-open Open eye icon class.
eyeCloseClass data-eye-close-class String glyphicon-eye-close Close eye icon class.

By default the plugin uses Bootstrap's Glyphicon font for painting open/close eye. You can use your custom font however. For example, you can switch to Font Awesome with:

$("#password").password({
    eyeClass: 'fa',
    eyeOpenClass: 'fa-eye',
    eyeCloseClass: 'fa-eye-slash'
})

You can see live demo of using plugin with Font Awesome on dogada.org.

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

Events

The plugin exposes a few events.

Event Type Description
show.bs.password This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.password This event is fired immediately when the hide instance method has been called.
$('#password').on('show.bs.password', function (e) {
    // code here
});

Reporting issues

Please provide jsFiddle when creating issues!

It's really saves much time. Use this as template:

jsFiddle Bootstrap Show Password

Your feedback is very appreciated!

CHANGELOG

1.0.3

  • Add eyeClass, eyeOpenClass, eyeCloseClass to use custom font (for example Font Awesome) instead of Bootstrap's default Glyphicon.

1.0.2

  • Add val option.

1.0.1

  • Via data attribute support.
  • Rename file name to bootstrap-show-password.js
  • Add bootstrap-show-password.min.js

1.0.0

  • Initial release

LICENSE

The MIT License