密码的明文和密文显示

本文介绍了一种在HTML中实现密码明文与密文显示切换的方法,通过使用两个input标签,一个用于显示密文,另一个用于显示明文,并利用jQuery进行事件监听和值同步。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

密码的明文和密文显示,在HTML中给两个input标签,一个input标签的类型为password,另一个input标签的类型为text,type="Password"的input标签为密文,type="text"的input标签为明文,先把type="text"的input标签给上一个样式属性style="display:none;"隐藏此input标签,只让一个标签显示出来

<input type="Password" name="UserPassword" id="UserPassword" class="form-control-zd mima_dd icon-zd" placeholder="操作员密码" value="@ViewBag.UserPassword" />
<input type="text" name="userPassword" id="userPassword" class="form-control-zd mima_wz icon-zd" style="display:none;" placeholder="操作员密码" value="@ViewBag.UserPassword" />

在input标签的同级当中的一个div里给一个自定义属性,并给这个自定义赋值,这个自定义属性用来判断当前input标签为明文还是密文
在这里插入图片描述
使用class获取到有自定义属性的div,给这个div一个点击事件,判断当前这个自定义属性的值是多少,如果这个自定义属性的值为1则input标签的type="text"为明文,自定义属性的值为2则input标签的type="Password"为密文。div获得点击事件首先判断这个自定义的值,值为1,那么把这个自定义的值重新赋值为2,如果值为2,那么把这个自定义的值重新赋值为1。当值为1的时候,获取这个div的父元素div的子元素类为mima_dd的input标签隐藏起来,类为mima_wz的input标签显示出来(既密文隐藏明文显示),然后把当前输入input标签输入框的值赋值回填到类为mima_dd(既显示出来的密文input标签),然后返回;当值为2的时候,获取这个div的父元素div的子元素类为mima_wz的input标签隐藏起来,类为mima_dd的input标签显示出来(既明文隐藏密文显示),把当前输入input标签输入框的值赋值回填到类为mima_wz(既显示出来的明文input标签)然后返回。两个input的不管怎么切换,input标签里输入的值都是相互赋值的,永远都是当前输入的值,也永远都相同。

$(".input-group-append").click(function () {
                if ($(this).attr("data-show") == 1) {//明文
                    $(this).attr("data-show", "2");
                    $(this).parent("div").children(".mima_dd").hide();
                    $(this).parent("div").children(".mima_wz").show();
                    $(this).parent("div").children(".mima_wz").val($(this).parent("div").children(".mima_dd").val());
                    return;
                }
                if ($(this).attr("data-show") == 2) {//密文
                    $(this).attr("data-show", "1");
                    $(this).parent("div").children(".mima_dd").show();
                    $(this).parent("div").children(".mima_wz").hide();
                    $(this).parent("div").children(".mima_dd").val($(this).parent("div").children(".mima_wz").val());
                    return;
                }
            })
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值