Show/hide password plugin for twitter bootstrap.
This plugin support bootstrap v2 and bootstrap v3.
The plugin acts on <input>
elements (typically password fields):
<input id="password" class="form-control" type="password" data-toggle="password">
<input data-toggle="password">
$('#password').password();
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. |
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) |
Manually show the password.
$('#password).password('show');
Manually hide the password.
$('#password).password('hide');
Manually toggle the password.
$('#password).password('toggle');
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
});
- Via data attribute support.
- Rename file name to bootstrap-show-password.js
- Add bootstrap-show-password.min.js
- Initial release