Bootstrap – Show or hide Password plugin
Show/hide password plugin for twitter bootstrap.
This plugin support bootstrap v2 and bootstrap v3.
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 valueEvents
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});Website & Source Code: https://github.com/wenzhixin/bootstrap-show-password#usage
Demo: http://wenzhixin.net.cn/p/bootstrap-show-password/
Thanks for reading,
Nabeel Shahid.
Recent Comments