密碼框的明密文(顯示和隱藏) 顯示

####最近在寫一個新的項目,從頭開始寫,所以就要從註冊登錄開始做起.以前寫登錄註冊模塊的時候,無外乎給input框一個type="password"就可以了,近期因爲要涉及到顯示隱藏狀態的切換.

####樣式代碼如下:
#####注:

1.樣式展示():
<ul>
   <li class="phone bgImg">
       <input type="text" id="phone" maxlength="11" placeholder="手機號"/>
   </li>
   <li class="password bgImg">
      <input type="password" id="password" maxlength="10" placeholder="6-10位數字&字母組合登錄密碼"/>
      <a href="#" id="passwordeye" class="invisible bgImg"></a>
   </li>
</ul>

1).隱藏按鈕css ,圖片用webpack做了壓縮,做了加密
ul li .invisible {
  background-image: url(data:image/png;base64,iVBORw0K);
  height: .5rem;
  top: .7rem;
2).顯示按鈕css
ul li .visible {
  background-image: url(data:image/png;base64,iVBORw0KG);
  height: .8rem;
  top: .55rem;

2.顯示隱藏對應的switchPwd()方法:
function switchPwd() {
   var passwordeye = $('#passwordeye');
   var showPwd = $("#password");
   passwordeye.off('click').on('click',function(){
       if(passwordeye.hasClass('invisible')){
           passwordeye.removeClass('invisible').addClass('visible');//密碼可見
           showPwd.prop('type','text');
       }else{
           passwordeye.removeClass('visible').addClass('invisible');//密碼不可見
           showPwd.prop('type','password');
       };
   });     
}

####代碼邏輯思路(最簡單的實現方式):
通過綁定顯示和隱藏圖片的id值(invisible和visible),通過去除屬性和添加屬性,切換圖片的顯示,然後對type的值(type=“text”,type=“password”)進行綁定顯示.這裏面給的是prop()方法來獲取屬性值,其實獲取屬性值得另一個attr()方法,這裏插一曲:

• 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
• 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

<a href="http://www.baidu.com" target="_self">百度</a>
 href,target是a鏈接中固有的屬性值 用prop()方法獲取屬性值.
<a href="#" id="desc" action="drop">減少</a>
 href,id是a鏈接中固有的屬性值 ,但是action是自己添加的屬性值,所有如過我想獲取action的屬性值,用attr().

以上就是 實現密碼的明密文切換顯示的邏輯實現
注:這裏補一個上一個博文的知識點
jquery中html(),text(),val()之前的區別:

.html()用來讀取和修改元素的html標籤
.text()用來讀取或修改元素的純文本內容
.val()用來賭氣或修改表單元素的value值
注:這三個都可以使用回調函數的返回值來動態改變多個元素值, .html()會將標籤也取出,.text()只會獲取文本內容

#####好的事情每天用心做一點，然後等待時間的回報O(∩_∩)O~~

有朋友經常諮詢眉毛素材，我放到網盤了。需要的朋友自行下載吧。
鏈接: https://pan.baidu.com/s/1dAXOys91Jufl0566K0fGvw
提取碼: 8sjc