原生js实现密码输入框值的显示隐藏

2019-11-19 16:03:52

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js显示隐藏密码输入框值的具体代码，供大家参考，具体内容如下

直接贴上代码

<!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; }/*输入框样式，去掉背景阴影模仿原生应用的输入框*/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;}/*输入框底部半透明横线*/.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语法实现，可对应换成jquery语法进行逻辑控制 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>

附上图片：

这里写图片描述