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保存的值是一致的,因此在校驗和提交表單時,只需處理其中一個即可