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)

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