您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变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 > <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实现登录页密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。