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