表单/表格

Bootstrap显示或隐藏密码jQuery插件

面包多

Bootstrap显示或隐藏密码jQuery插件-创客云
这是一款 Bootstrap 显示或隐藏密码 jquery 插件。该插件支持 bootstrap2 和 bootstrap3,可用于在表单密码字段上显示或隐藏用户输入的密码。

使用方法

在页面中引入 jquery,bootstrap 和 bootstrap-show-password 相关文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="assets/bootstrap-v3/css/bootstrap.css">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/bootstrap.min.js"></script>
  4. <script src="js/bootstrap-show-password.js"></script>

HTML 结构

该插件主要在密码字段上使用:

  1. <input id="password" class="form-control" type="password" data-toggle="password">

初始化插件

初始化插件的方法有两种,可以使用 data-*属性来初始化插件,或使用 js 的方法来初始化插件。
1、通过 data-*属性来初始化插件:

  1. <input id="password" class="form-control" type="password" data-toggle="password">

2、通过 js 的方法来初始化插件:

  1. $('#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 字体图标,你可以通过参数来设置使用其它的字体图标,例如:

  1. $("#password").password({
  2.     eyeClass: 'fa',
  3.     eyeOpenClass: 'fa-eye',
  4.     eyeCloseClass: 'fa-eye-slash'
  5. })

方法

bootstrap-show-password 插件的可用方法有:

password('show'):手动显示密码。

  1. $('#password').password('show');

password('hide'):手动隐藏密码。

  1. $('#password').password('hide');

password('toggle'):手动切换密码的可见状态。

  1. $('#password').password('toggle');

password('val', [value]);:设置或获取当前密码的值。

  1. $('#password').password('val'); // get value
  2.     $('#password').password('val', 'password'); // set value

password('focus'):将密码字段设置焦点

事件

bootstrap-show-password 插件的可用事件有:

事件类型 事件描述
show.bs.password 当显示实例方法使用时该事件会立即被触发。
hide.bs.password 当隐藏实例方法使用时该事件会立即被触发。
  1. $('#password').on('show.bs.password', function (e) {
  2.     // code here
  3. });

Github 地址:https://github.com/wenzhixin/bootstrap-show-password

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!