H5 JS控制input表单密码的显示与隐藏

最新推荐文章于 2025-06-10 11:30:12 发布

原创最新推荐文章于 2025-06-10 11:30:12 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#input #H5 #密码

H5 专栏收录该内容

6 篇文章

订阅专栏

通过JS动态改变input表单的type属性，结合图标实现密码的显示与隐藏。核心思路是切换输入框类型及加载对应图片。

原理：要实现这个功能首先想到的是用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";  
     }  
}