Bootstrap Show Password
Show/hide password plugin for twitter bootstrap.
Demos
This plugin support bootstrap v2 and bootstrap v3.
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