/bootstrap-show-password

Show/hide password plugin for twitter bootstrap.

Primary LanguageHTMLMIT LicenseMIT

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.

$('#passwor'd).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