又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变input的type类型，具体过程看代码：
在没给大家分享实现代码之前，先给大家展示下效果图：
<ul class="form-area">
<li>
<div class="item-content">
<div class="item-input">
<input type="text" name="accountName" autofocus required="required" placeholder="请输入用户名">
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-input">
<input type="password" name="password" id="password" required="required" placeholder="请输入密码">
</div>
</div>
</li>
<li>
<span style="position:absolute;right: 20px;top: -38px">
<img id="showText" onclick="hideShowPsw()">
</span>
</li>
</ul>
<script type="text/javascript">
//获取input框内的切换图片id和input文本框的id
var demoImg = document.getElementById("showText");
var demoInput = document.getElementById("password");
function hideShowPsw() {
if (demoInput.type == "password") {
demoInput.type = "text";
demoImg.src ="../Images/showPasswd.png";
} else {
demoInput.type = "password";
demoImg.src = "../Images/hidePasswd.png";
}
}
</script>
总结
以上所述是小编给大家介绍的JS实现登录页密码的显示和隐藏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是JS实现登录页密码的显示和隐藏功能。黄老师批评的时候像蒙蒙细雨，绵绵长长，而林老师总是暴风雨，那也好，快去快来。更多关于JS实现登录页密码的显示和隐藏功能请关注haodaima.com其它相关文章！
