原生js實(shí)現(xiàn)密碼輸入框值的顯示隱藏

2019-11-19 16:03:52

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了js顯示隱藏密碼輸入框值的具體代碼，供大家參考，具體內(nèi)容如下

直接貼上代碼

<!DOCTYPE html><html><head> <title>password intput demo</title></head><style type="text/css">body{ margin:0px;  background-color: white;  font-family: 'PT Sans', Helvetica, Arial, sans-serif;  text-align: center;  color: #A6A6A6; }/*輸入框樣式，去掉背景陰影模仿原生應(yīng)用的輸入框*/input{width: 100%; height: 50px; border:none; padding-left:3px; font-size: 18px; }input:focus {  outline: none; }/*顯示/隱藏密碼圖片*/img{width: 40px;height: 25px;position: absolute; right: 0px; margin: 15px; }/*登錄按鈕*/button{  width: 200px;  height: 50px;  margin-top: 25px;  background: #1E90FF;  border-radius: 10px;  border:none; font-size: 18px; font-weight: 700;  color: #fff;}button:hover {background: #79A84B; outline: 0;}/*輸入框底部半透明橫線(xiàn)*/.input_block { border-bottom: 1px solid rgba(0,0,0,.1);}/*container*/#page_container{ margin: 50px;}</style><body><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><script type="text/javascript"> // 這里使用最原始的js語(yǔ)法實(shí)現(xiàn)，可對(duì)應(yīng)換成jquery語(yǔ)法進(jìn)行邏輯控制 var demoImg = document.getElementById("demo_img"); var demoInput = document.getElementById("demo_input"); //隱藏text block，顯示password block function hideShowPsw(){ if (demoInput.type == "password") {  demoInput.type = "text";  demo_img.src = "invisible.png"; }else {  demoInput.type = "password";  demo_img.src = "visible.png"; } }</script></body></html>

附上圖片：

這里寫(xiě)圖片描述