js實現密碼輸入框切換顯示和隱藏


1、需求背景

  在設置密碼信息時,需要支持輸入內容的隱藏和可見的切換,效果如下:

  隱藏:

  顯示:

2、實現原理:

  1. 設置兩個input,一個type為password,一個type為text,分別用於顯示隱藏密碼和可見密碼

  2. 設置兩個字體圖標,一個為睜開的眼睛,一個為閉上的眼睛,用於點擊切換兩個input的顯示,當然,圖標的樣式可以任意定義

  3. 保證兩個input的值相同

3、代碼實現:

  1. html

    

  2. css

    

  3. js

    

 4、注意事項:

  1. 本文代碼使用了jquery,需引入;使用了字體圖標,需引入

  2. IE中默認對type為password的input設置了眼睛圖標用於顯示密碼,對type為text的input設置了×號圖標用於清除內容,本文將其設置為隱藏,保證瀏覽器兼容性

  3. 因為兩個input保存的值是一致的,因此在校驗和提交表單時,只需處理其中一個即可

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM