显示隐藏密码jQuery插件:jquery.toggle-password

引用jquery-1.9.1.js以上
(function ($) {
    $.fn.togglePassword = function (options) {
        var s = $.extend($.fn.togglePassword.defaults, options),
            input = $(this);

        $(s.el).bind(s.ev, function () {
            "password" == $(input).attr("type") ?
                $(input).attr("type", "text") :
                $(input).attr("type", "password");
 
            if ($(this).hasClass("image-eye-open")) {
                $(this).addClass("image-eye-close").removeClass("image-eye-open");
            }
            else {
                $(this).addClass("image-eye-open").removeClass("image-eye-close");
            }
        });
    };

    $.fn.togglePassword.defaults = {
        ev: "click"
    };
}(jQuery));

///CSS
//.image - eye - close { background: url("../img/clear_icon_eye_close.png"); height: 20px; width: 20px; display: block; background - size: 20px 20px; background - repeat: no - repeat; position: absolute; right: 10px; top: 25 %; cursor: pointer; }
 
//.image - eye - open { background: url("../img/clear_icon_eye_open.png"); height: 20px; width: 20px; display: block; background - size: 20px 20px; background - repeat: no - repeat; position: absolute; right: 10px; top: 25 %; cursor: pointer; }

使用

<input class="txtPasswordOK" id="txtPasswordOK" type="password"
                               autocomplete="off" placeholder="输入确认密码" />
<label class="image-eye image-eye-close"></label>
$(function () {
 
          $('#txtPasswordOK').togglePassword({
              el: '.image-eye'
          });
      });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/772508.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Windows】Bootstrap Studio(网页设计)软件介绍及安装步骤

软件介绍 Bootstrap Studio 是一款专为前端开发者设计的强大工具&#xff0c;主要用于快速创建现代化的响应式网页和网站。以下是它的主要特点和功能&#xff1a; 直观的界面设计 Bootstrap Studio 提供了直观的用户界面&#xff0c;使用户能够轻松拖放元素来构建网页。界面…

audo dl上使用tensorrt llm,baichuan7B为例

1. 在社区镜像搜索 nvidia 找一个tensorrt llm 0.10 以上的版本&#xff0c;系统盘30g安装软件应该够用&#xff0c;免费的数据盘50G用来存放模型。baichuan7B原始模型应该会占用14G&#xff0c;转换为fp16的 ckpt后再占用14G&#xff0c;build后占用14G。总共需要占用42G&…

视频太大发不出去怎么处理,视频太大发不了邮件怎么办

在数字化时代&#xff0c;视频已成为我们分享生活、传递信息的重要方式。然而&#xff0c;当遇到视频文件过大&#xff0c;无法发送或分享时&#xff0c;你是否感到困扰&#xff1f;别担心&#xff0c;本文将为你揭秘轻松解决视频太大发不了的问题。 电脑频编辑器可以用于简单的…

工业智能网关的作用有哪些?工业智能网关与传统网关的主要区别-天拓四方

工业智能网关是一种专为工业环境设计的网络设备&#xff0c;具备数据采集、传输、协议转换以及边缘计算等功能。它作为连接工业设备与互联网的关键枢纽&#xff0c;不仅实现了工业设备的互联互通&#xff0c;还通过对采集到的数据进行实时分析&#xff0c;为工业生产的智能化管…

第一百四十三节 Java数据类型教程 - Java Boolean包装类

Java数据类型教程 - Java Boolean包装类 布尔类的对象包装一个布尔值。 Boolean.TRUE和Boolean.FALSE是布尔类型的两个常量&#xff0c;用于表示布尔值true和false值。 我们可以使用构造函数或valueOf()工厂方法创建一个布尔对象。 当解析字符串时&#xff0c;此类将处理“t…

软考-软件设计师 知识点整理(一篇就过了 建议收藏)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文☀️☀️☀️1.进制转换2.码制3.浮点数表示4.逻辑运算5.奇偶校验6.CRC循环冗余7.海明校验码8.CPU组成&am…

mybatis实现动态sql

第一章、动态SQL MyBatis 的强大特性之一便是它的动态 SQL。如果你有使用 JDBC 或其它类似框架的经验&#xff0c;你就能体会到根据不同条件拼接 SQL 语句的痛苦。例如拼接时要确保不能忘记添加必要的空格&#xff0c;还要注意去掉列表最后一个列名的逗号。利用动态 SQL 这一特…

关于虚拟机CentOS 7使用ssh无法连接(详细)

虚拟机CentOS 7使用ssh无法连接 猜测&#xff1a;可能是虚拟机软件的网关和和centos7的网关不同导致的问题。 首先打开CentOS7的终端, 输入ifconfig&#xff0c;查看一下系统的ip 打开虚拟机的虚拟网络编辑器, 查看一下网关, 发现确实不一样. 这里有两种方式, 要么修改虚…

104.二叉树的最大深度——二叉树专题复习

深度优先搜索&#xff08;DFS&#xff09;是一种常用的递归算法&#xff0c;用于解决树形结构的问题。在计算二叉树的最大深度时&#xff0c;DFS方法会从根节点开始&#xff0c;递归地计算左右子树的最大深度&#xff0c;然后在返回时更新当前节点所在路径的最大深度。 如果我…

gin项目部署到服务器并后台启动

文章目录 一、安装go语言环境的方式1.下载go安装包&#xff0c;解压&#xff0c;配置环境变量2.压缩项目上传到服务器并解压3.来到项目的根目录3.开放端口&#xff0c;运行项目 二、打包的方式1.在项目的根目录下输入以下命令2.把打包好的文件上传到服务器3.部署网站4.ssl证书 …

Web前端开发——HTML快速入门

HTML&#xff1a;控制网页的结构CSS&#xff1a;控制网页的表现 一、什么是HTML、CSS &#xff08;1&#xff09;HTML &#xff08;HyperText Markup Languaqe&#xff1a;超文本标记语言&#xff09; 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了…

vienna整流器过零畸变原因分析

Vienna整流器是一种常见的三电平功率因数校正&#xff08;PFC&#xff09;整流器&#xff0c;广泛应用于电源和电能质量控制领域。由于其高效率、高功率密度和低谐波失真的特点&#xff0c;Vienna整流器在工业和电力电子应用中具有重要地位。然而&#xff0c;在实际应用中&…

新手拍短视频的些许建议

1、尽早行动&#xff0c;拒绝完美主义&#xff0c;有手机就能上车&#xff0c;一开始别花太多时间在打磨细节上。总是要准备好了后再做&#xff0c;就总比别人慢一步&#xff0c;可能永远也追不上了&#xff1b; 2、坚持发&#xff0c;度过难熬的启动期就行&#xff0c;不要走…

比Proxmox VE更易用的免费虚拟化平台

之前虚拟化一直玩Proxmox VE&#xff0c;最近发现一个更易用的虚拟化软件CSYun&#xff0c;他与Proxmox VE类似&#xff0c;都是一个服务器虚拟化平台。它不像VMware ESXi那么复杂&#xff0c;对于个人使用者和中小企业是一个比较好的选择。 这个软件所在的网址为&#xff1a;…

安装 VisualSVN Server提示HTTP服务无法启动的问题解决

安装 VisualSVN Server 版本&#xff1a;VisualSVN-Server-5.4.0-x64 安装包在安装到一半的时候&#xff0c;弹窗提示&#xff1a;HTTP服务无法启动&#xff0c;网上找了一大堆&#xff0c;说是service里面更改用户为本地用户什么的都没用用&#xff0c;点右键也无法启动。 …

基于Java的壁纸网站设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

Spring MVC 中 使用 RESTFul 实现用户管理系统

1. Spring MVC 中 使用 RESTFul 实现用户管理系统 文章目录 1. Spring MVC 中 使用 RESTFul 实现用户管理系统2. 静态页面准备2.1 user.css2.2 user_index.html2.3 user_list.html2.4 user_add.html2.5 user_edit.html 3. SpringMVC环境搭建3.1 创建module&#xff1a;usermgt3…

解决mysql数据库连接报错:Authentication plugin ‘caching_sha2_password‘ cannot be loaded

解决mysql数据库连接报错&#xff1a;Authentication plugin ‘caching_sha2_password’ cannot be loaded OperationalError: (2059, “Authentication plugin ‘caching_sha2_password’ cannot be loaded: /usr/lib/mysql/plugin/caching_sha2_password.so: cannot open sha…

人脸重建迁移攻击FRTA:绕过各种未见过的面部识别系统

随着人脸识别系统在安全关键环境中的部署日益增多&#xff0c;威胁行为者正在开发针对各种攻击点的复杂攻击策略。在这些攻击策略中&#xff0c;面部重建攻击是一个主要的威胁。面部重建攻击的主要目的是创建伪造的生物特征图像&#xff0c;这些图像类似于存储的生物特征模板中…

vue中数组出现__ob__: Observer属性,导致不能正确使用问题解决

直接上图&#xff0c;如下图&#xff0c;数组中出现__ob__: Observer属性&#xff0c;导致无法取值。 解决方案为&#xff1a;JSON.parse(JSON.stringify(数组变量名))深拷贝数组&#xff0c;重新生成一个可枚举数组。 // 处理代码如let tempIds JSON.parse(JSON.stringify(i…