輸入框密碼的顯示與隱藏

在逛部落格的時候發現大家對密碼的明文，密文切換有疑惑，正巧最近在做手機端頁面的時候碰到了密碼的顯示與隱藏，在這裡就跟小夥伴們分享下。

在這裡我整理了兩種方法，親測有效這裡寫程式碼片

• 方法一

• 通過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;
        } 
    });

效果圖如下

總的來說第一種方法是比較好的，程式碼簡潔，並且目前沒有發現什麼相容性的問題。 跟後端互動也不會被吐槽（不要問我為什麼知道）。

歡迎各位小夥伴給我留言一起探討問題，本人剛涉足前端不久，還請圈內大佬提點。