JS实现登录页密码的显示和隐藏功能
时间：2021-05-18 09:48:20 | 栏目：JavaScript代码 | 点击：次
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变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>
总结