zoukankan      html  css  js  c++  java
  • 在输入密码框中眼睛睁开可以看见数字,眼睛闭上看不见数字怎么用JS实现

    无论做那个项目,登录注册页面总是避免不了的,那怎么用js来控制密码的显示和隐藏呢?先看一下效果图:

    HTML代码如下:

    <div>
             <label for="password">
                   <input type="password" id="password" placeholder="请输入密码" maxlength="12" value="" autocomplete="off">
                  <span class="login__pwdnotShow___3kxE7" id="lyypd"></span>
             </label>
     </div>

    JS代码如下:

    <script type="text/javascript">
               window.onload=function(){
                   var input=document.getElementById("password")
                   var eyes=document.getElementById("lyypd")
                     eyes.onclick=function(e){
                         var btn=e.target.className    //e.target是找到了鼠标点击事件的DOM元素
                         if(btn === 'login__pwdnotShow___3kxE7'){
                             input.type="text"
                             e.target.className="login__pwdShow___3dPhS"
                         }
                         else if(btn === 'login__pwdShow___3dPhS'){
                             input.type="password"
                             e.target.className="login__pwdnotShow___3kxE7"
                         }
                     }
               }
      </script>

    解释:代码放置在window.onload的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,如果js放在div上面,则需放在window.onload的事件处理函数中才能显示效果

  • 相关阅读:
    4_url_for的使用
    3_Flask中URL与视图函数的映射
    2_Fiask的配置文件config
    C10K问题渣翻译
    (转载)Linux 套接字编程中的 5 个隐患
    linux2.6.24内核源代码分析(2)——扒一扒网络数据包在链路层的流向路径之一
    linux2.6.24内核源代码分析(1)——扒一扒sk_buff
    andriod手机签到应用服务器设计
    (转)ubuntu安装opengl
    线段树
  • 原文地址:https://www.cnblogs.com/lyyguniang/p/7825219.html
Copyright © 2011-2022 走看看