關於密碼框明文密文的心得
阿新 • • 發佈:2018-12-22
輸入框密碼的顯示與隱藏
在逛部落格的時候發現大家對密碼的明文,密文切換有疑惑,正巧最近在做手機端頁面的時候碰到了密碼的顯示與隱藏,在這裡就跟小夥伴們分享下。
在這裡我整理了兩種方法,親測有效這裡寫程式碼片
- 方法一
通過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;
}
});
效果圖如下
總的來說第一種方法是比較好的,程式碼簡潔,並且目前沒有發現什麼相容性的問題。 跟後端互動也不會被吐槽(不要問我為什麼知道)。
歡迎各位小夥伴給我留言一起探討問題,本人剛涉足前端不久,還請圈內大佬提點。