关于密码框明文密文的心得

输入框密码的显示与隐藏

在逛博客的时候发现大家对密码的明文，密文切换有疑惑，正巧最近在做手机端页面的时候碰到了密码的显示与隐藏，在这里就跟小伙伴们分享下。

在这里我整理了两种方法，亲测有效这里写代码片

---

• 方法一

• 通过js改变input框的 type属性来切换明文，密文
  这里需要注意 input框的属性修改 不能直接使用attr()

  html部分

<div class="form-list shadow">
                <div class="form-list-top">
                    <input type="password" class="form-input2 mima_dd mima2" id="mima2"  placeholder="请输入密码">
                    <div class="form-icon"><i data-show="1" class="iconfont eyes icon-yincangx-"></i></div>
                </div>
</div>

js部分

• 点击眼睛字体图标切换，并记录现在的自定义属性“data-show”

$(".eyes").click(function(){
        $(this).toggleClass("icon-yanjing")
        $(this).toggleClass("icon-yincangx-")
        if($(this).attr("data-show")==1){//明文
            $(this).attr("data-show","2");
            $(this).parent().parent().find(".mima_dd").get(0).setAttribute("type","text");
            return;
        }
        if($(this).attr("data-show")==2){//密文
            $(this).attr("data-show","1");
            $(this).parent().parent().find(".mima_dd").get(0).setAttribute("type","password");
            return;
        }
    });

---

• 方法二
• 在HTML中有两个input，分别是text框和password框。通过js控制input框的某一个的显示和隐藏来切换明文，密文
  html部分

<div class="form-list shadow">
                <div class="form-list-top">
                    <input type="password" class="mima_dd mima1" id="mima2"  placeholder="请输入密码">                   
                    <input type="password" class="mima_zz mima2" id="mima2"  placeholder="请输入密码">
                    <div class="form-icon"><i data-show="1" class="iconfont eyes icon-yincangx-"></i></div>
                </div>
</div>

js部分

• 点击眼睛字体图标切换，并记录现在的自定义属性“data-show”

$(".eyes ).click(function(){
    if($(this).attr("data-show")==1){//明文
        $(this).attr("data-show","2");
        $(".mima_dd").hide();
        $(".mima_wz").show();
        $(".mima_wz").val($(".mima_dd").val()); 
        return;
        }
    if($(this).attr("data-show")==2){//密文
        $(this).attr("data-show","1");
        $(".mima_dd").show();
        $(".mima_wz").hide();
        $(".mima_dd").val($(".mima_wz").val()); 
        return;
        } 
    });

---

效果图如下

总的来说第一种方法是比较好的，代码简洁，并且目前没有发现什么兼容性的问题。 跟后端交互也不会被吐槽（不要问我为什么知道）。

欢迎各位小伙伴给我留言一起探讨问题，本人刚涉足前端不久，还请圈内大佬提点。

---