Bootstrap显示或隐藏密码jquery插件

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

配置参数

该插件默认使用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插件的可用事件有：

$('#password').on('show.bs.password', function (e) {
    // code here
});
                

bootstrap-show-password插件的github地址为：https://github.com/wenzhixin/bootstrap-show-password