H5 JS控制input表單密碼的顯示與隱藏
原理:要實現這個功能首先想到的是用js動態改變input的type型別,並動態載入相應的圖片。廢話不多說,直接上程式碼:
<div id="page_container">
<!--密碼輸入框-->
<div class="input_block">
<img id="demo_img" onclick="hideShowPsw()" src="visible.png">
<input type="password" id="demo_input" placeholder="Password"/>
</div>
<button onclick="">Login</button>
</div>
var demoImg = document.getElementById("demo_img");
var demoInput = document.getElementById("demo_input");
function hideShowPsw(){
if (demoInput.type == "password") {
demoInput.type = "text";
demo_img.src = "invisible.png";
}else {
demoInput.type = "password";
demo_img.src = "visible.png";
}
}
相關文章
- 直播平臺原始碼,input密碼框顯示與隱藏原始碼密碼
- Three.js控制物體顯示與隱藏的方法JS
- Android 眼睛 顯示隱藏密碼(ImageView)Android密碼View
- Boostrap5透過JS控制Offcanvas的顯示隱藏JSCanvas
- 直播平臺原始碼,Android實現密碼顯示與隱藏原始碼Android密碼
- vue.js顯示與隱藏(v-if)Vue.js
- 搭建直播平臺,顯示隱藏密碼,眼睛特效密碼特效
- 直播系統程式碼,輸入時實現密碼顯示與隱藏密碼
- jQuery控制div顯示和隱藏程式碼例項jQuery
- jQuery 顯示 input 輸入的密碼!jQuery密碼
- 直播網站原始碼,EasyUI按鈕控制標籤顯示與隱藏網站原始碼UI
- 直播商城原始碼,密碼輸入框自定義顯示隱藏圖示原始碼密碼
- mac顯示隱藏檔案,取消顯示隱藏檔案Mac
- jQuery動畫的顯示與隱藏效果jQuery動畫
- jQuery動畫的顯示與隱藏效果!jQuery動畫
- 通過select下拉框裡的value控制div顯示與隱藏
- JavaScript 設定div顯示與隱藏JavaScript
- jQuery 實現顯示與隱藏效果jQuery
- JavaScript動畫方式控制div元素的隱藏和顯示JavaScript動畫
- Vue控制子元件的顯示隱藏的四種辦法Vue元件
- # Flutter控制元件的顯示和隱藏的三種方式Flutter控制元件
- iOS 隱藏&顯示tabBariOStabBar
- vue3 el-table控制列顯示隱藏Vue
- Mac顯示和隱藏“隱藏檔案”命令Mac
- 關閉(隱藏)控制檯上顯示的檔案路徑
- 區塊的顯示和隱藏
- js下拉框實現div顯示和隱藏JS
- excel隱藏的部分如何顯示出來 excel裡面怎麼顯示隱藏部分Excel
- OSX中隱藏和顯示[隱藏檔案]的命令列命令列
- jQuery 效果 – 隱藏和顯示jQuery
- Mac顯示/不顯示隱藏檔案教程!Mac
- 動態控制C4C UI元素的顯示和隱藏UI
- javascript隱藏和顯示div的方法JavaScript
- 短視訊程式開發,動態實現密碼、核取方塊等顯示與隱藏密碼
- CSS 小結筆記之元素的隱藏與顯示CSS筆記
- steam隱藏的遊戲怎麼顯示出來 steam隱藏顯示遊戲方法介紹遊戲
- MACOS 如何顯示隱藏檔案Mac
- 【macOS】顯示/隱藏 指定檔案Mac