jQuery显示隐藏和复制表单密码字段插件

当前位置:主页 > jQuery库 > 表单 > jQuery显示隐藏和复制表单密码字段插件
jQuery显示隐藏和复制表单密码字段插件
分享:

    插件介绍

    jQuery-peeper是一款jQuery显示隐藏和复制表单密码字段插件。该插件提供多种方式显示和隐藏表单password字段的密码,并额外提供复制密码字段为纯文本的功能。

    浏览器兼容性

    浏览器兼容性
    时间:2019-08-16
    阅读:
简要教程

jQuery-peeper是一款jQuery显示隐藏和复制表单密码字段插件。该插件提供多种方式显示和隐藏表单password字段的密码,并额外提供复制密码字段为纯文本的功能。

使用方法

安装

npm install jquery-peeper                    
                

在页面中引入下面的文件。

<link rel="stylesheet" href="/jquery-peeper/dist/css/jquery-peeper.min.css" />
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-peeper.min.js"></script>          
                

jQuery显示隐藏和复制表单密码字段插件

初始化插件
$(function() {
    $("#password1").peeper();
});
                
配置参数
$(function() {
    $("#password1").peeper({
    showEvent: 'mouseup', // event to show password 
    showElement: '.peeper-mask', // DOM element (eg. button to show password)
    mask: true, // show mask
    maskOpacity: 1, //mask opacity (eg. 0.5)
    autohide: true, // hide password after time
    autohideTime: 4000, // hide password time in ms
    maskCss: 'gray', // mask style (eg. red, green, blue or custom)
    showPasswordCss: 'fa fa-key', // show password icon/style
    copyPasswordCss: 'fa fa-copy', // copy password icon/style
    showCopyBtn: true, // copy password button
    showPasswordBtn: true, // show password button
    animateDuration: 300 // mask animation time
    });
});  
                

该jQuery显示隐藏和复制表单密码字段插件的github网址为:https://github.com/msztorc/jquery-peeper