Show/hide password plugin for twitter bootstrap.
Switch branches/tags
Clone or download

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

</tbody>
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.
eyeClassPositionInside data-eye-class-position-inside Boolean false Puts the open/close class inside the <i>. Use this option with google material icons.

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

.password('focus')

Focus the password input.

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

  • Add focus method.

1.1.0

  • Add support for google material design icons, by usgin the data-eye-class-position-inside property.

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