H5 JS控制input表單密碼的顯示與隱藏

itKingOne發表於2018-05-28

原理:要實現這個功能首先想到的是用js動態改變inputtype型別,並動態載入相應的圖片。廢話不多說,直接上程式碼:

<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";  
     }  
} 

相關文章