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

你的名字 2022-05-24 13:21 333阅读 0赞

原理：要实现这个功能首先想到的是用js动态改变input的type类型，并动态加载相应的图片。废话不多说，直接上代码：

  1. <div id="page_container">  
  2.     <!--密码输入框-->  
  3.     <div class="input_block">  
  4.         <img id="demo_img" οnclick="hideShowPsw()" src="visible.png">  
  5.         <input type="password" id="demo_input" placeholder="Password"/>  
  6.     </div>  
  8.     <button οnclick="">Login</button>  
  9. </div>
  11. var demoImg = document.getElementById("demo_img");  
  12. var demoInput = document.getElementById("demo_input"); 
  13. function hideShowPsw(){  
  14.      if (demoInput.type == "password") {  
  15.           demoInput.type = "text";  
  16.           demo_img.src = "invisible.png";  
  17.      }else {  
  18.           demoInput.type = "password";  
  19.           demo_img.src = "visible.png";  
  20.      }  
  21. }

发表评论

表情：
评论列表 （有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js实现显示与隐藏

    总结如下： 1.jQuery中隐藏元素的hide方法   让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态

    亦凉亦凉/ 0 赞/ 1179 阅读