这是一款Bootstrap显示或隐藏密码jquery插件。该插件支持bootstrap2和bootstrap3,可用于在表单密码字段上显示或隐藏用户输入的密码。
安装
可以通过npm或bower来安装bootstrap-show-password插件。
bower install bootstrap-show-password npm install bootstrap-show-password
使用方法
在页面中引入jquery,bootstrap和bootstrap-show-password相关文件。
<link rel="stylesheet" href="assets/bootstrap-v3/css/bootstrap.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-show-password.js"></script>
HTML结构
该插件主要在密码字段上使用:
<input id="password" class="form-control" type="password" data-toggle="password">
初始化插件
初始化插件的方法有两种,可以使用data-*
属性来初始化插件,或使用js的方法来初始化插件。
1、通过data-*
属性来初始化插件:
<input id="password" class="form-control" type="password" data-toggle="password">
2、通过js的方法来初始化插件:
$('#password').password();
配置参数
参数 | data属性 | 类型 | 默认值 | 描述 |
- | data-toggle | String | password | Active password without writing JavaScript |
placement | data-placement | String | after | 替代显示/隐藏图标,可以是'before'或 'after' |
message | data-message | String | Click here to show/hide password | 提示文本 |
white | data-white | Boolean | false | 显示白色图标(仅对bootstrap v2有效) |
eyeClass | data-eye-class | String | glyphicon | 眼睛小图标的class类 |
eyeOpenClass | data-eye-open-class | String | glyphicon-eye-open | 眼睛打开小图标的class类 |
eyeCloseClass | data-eye-close-class | String | glyphicon-eye-close | 眼睛关闭小图标的class类 |
eyeClassPositionInside | data-eye-class-position-inside | Boolean | false | 将open/close class放入<i> 标签中。该参数用于谷歌material图标。 |
该插件默认使用bootstrap Glyphicon字体图标,你可以通过参数来设置使用其它的字体图标,例如:
$("#password").password({ eyeClass: 'fa', eyeOpenClass: 'fa-eye', eyeCloseClass: 'fa-eye-slash' })
方法
bootstrap-show-password插件的可用方法有:
-
password('show')
:手动显示密码。$('#password').password('show');
-
password('hide')
:手动隐藏密码。$('#password').password('hide');
-
password('toggle')
:手动切换密码的可见状态。$('#password').password('toggle');
-
password('val', [value]);
:设置或获取当前密码的值。$('#password').password('val'); // get value $('#password').password('val', 'password'); // set value
-
password('focus')
:将密码字段设置焦点。
事件
bootstrap-show-password插件的可用事件有:
事件类型 | 事件描述 |
show.bs.password | 当显示实例方法使用时该事件会立即被触发。 |
hide.bs.password | 当隐藏实例方法使用时该事件会立即被触发。 |
$('#password').on('show.bs.password', function (e) { // code here });
bootstrap-show-password插件的github地址为:https://github.com/wenzhixin/bootstrap-show-password
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!