JS实现登录页密码的显示和隐藏功能
编程学习 2021-07-04 17:33www.dzhlxh.cn编程入门
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。狼蚁网站SEO优化给大家介绍基于JS实现登录页密码的显示和隐藏功能，需要的朋友参考下吧
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变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实现登录页密码的显示和隐藏，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！