这是一款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