n1klas / bootstrap-show-password

Show/hide password plugin for twitter bootstrap.

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