密码的明文和密文显示

开发工具与关键技术：Visual Studio 与jQuery

作者：黄灿

撰写时间：2019.6.9

密码的明文和密文显示，在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;

                }

            })