JS实现登录页密码的显示和隐藏功能

前端之家收集整理的这篇文章主要介绍了JS实现登录页密码的显示和隐藏功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_301_0@在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码


@H_301_0@在没给大家分享实现代码之前,先给大家展示下效果图:


<p style="text-align: center">

这里写图片描述


<p style="text-align: center">

这里写图片描述


<div class="jb51code">
<pre class="brush:js;">
<ul class="form-area">

  • required="required" placeholder="请输入用户名">
  • required="required" placeholder="请输入密码">
  • 获取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"; } }
    @H_301_0@

    总结

    @H_301_0@以上所述是小编给大家介绍的JS实现登录页密码的显示和隐藏。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/js/34845.html

    猜你在找的JavaScript相关文章