密码输入框的显示与隐藏

Posted 2021-02-10 zfdbk

密码的显示与隐藏  只需切换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();
      });