input type=passoord 密碼框的明密文(顯示和隱藏) 顯示

最近在寫一個新的項目,從頭開始寫,因此就要從註冊登陸開始作起.之前寫登陸註冊模塊的時候,無外乎給input框一個type=」password」就能夠了,近期由於要涉及到顯示隱藏狀態的切換.

樣式代碼以下:

注:

html:css

<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>

css:html

/*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;

js:jquery

//顯示隱藏對應的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()方法,這裏插一曲:webpack

對於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()以前的區別:

web

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