码迷,mamicode.com
首页 > 其他好文 > 详细

密码输入框的显示与隐藏

时间:2019-02-22 12:21:56      阅读:718      评论:0      收藏:0      [点我收藏+]

标签:show   html   inpu   close   type   输入   item   src   div   

密码的显示与隐藏  只需切换type 为text,或者password。

html

  <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class=" iphoe-pic suo-pic"></div>
                      <div class="see">
                        <img src="../image/login/openeye.png" id="openEye" style="display:none;">
                        <img src="../image/login/closeeye.png"  alt="隐藏密码" id="closeEye" >
                      </div>
                    <div class="aui-list-item-input aui-padded-l-10">
                        <input type="password"  placeholder="请输入密码" id="password" class="input-login">
                    </div>

                </div>
            </li>

js

      $("#openEye").click(function(){
          $("#password").attr("type","password");
          $("#openEye").hide();
          $("#closeEye").show();
      });
      $("#closeEye").click(function(){
          $("#password").attr("type","text");
          $("#closeEye").hide();
          $("#openEye").show();
      });

 

密码输入框的显示与隐藏

标签:show   html   inpu   close   type   输入   item   src   div   

原文地址:https://www.cnblogs.com/zfdbk/p/10417322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!