日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

1、需求背景

　　在設(shè)置密碼信息時(shí)，需要支持輸入內(nèi)容的隱藏和可見的切換，效果如下：

　　隱藏：

　　顯示：

2、實(shí)現(xiàn)原理：

　　1. 設(shè)置兩個(gè)input，一個(gè)type為password，一個(gè)type為text，分別用于顯示隱藏密碼和可見密碼

　　2. 設(shè)置兩個(gè)字體圖標(biāo)，一個(gè)為睜開的眼睛，一個(gè)為閉上的眼睛，用于點(diǎn)擊切換兩個(gè)input的顯示，當(dāng)然，圖標(biāo)的樣式可以任意定義

　　3. 保證兩個(gè)input的值相同

3、代碼實(shí)現(xiàn)：

　　1. html

密碼:
<input type="password" class="input-password1" name="password1" id="password1" />
<input type="text" class="input-password2" name="password2" id="password2" />
<i class="fa fa-eye-open" id="togglePassword"></i>

2. css

/* 設(shè)置眼睛圖標(biāo)的樣式 */
.fa{
  width: 24px;
  height:24px;
  cursor: pointer;
  margin-left: -30px; /* 將眼睛圖標(biāo)放在input框中 */
}
.input-password2{
  display: none; /* 初始狀態(tài)隱藏第二個(gè)input框 */
}
/* 隱藏掉ie中默認(rèn)實(shí)現(xiàn)的眼睛 */
.input-password1::-ms-reveal {
  display: none;
}
/* 隱藏掉ie中默認(rèn)實(shí)現(xiàn)的x號(hào) */
.input-password2::-ms-clear {
  display: none;
}

3. js

<script type="text/javascript">
  // 監(jiān)聽切換顯示與隱藏的點(diǎn)擊事件
  $('#togglePassword').click(function() {
    if ($(this).hasClass('fa-eye-open' )) {
      $('#password1').hide();
      $('#password2').show();
      $(this).removeClass('fa-eye-open').addClass('fa-eye-close');
    } else {
      $('#password1').show();
      $('#password2').hide();
      $(this).removeClass('fa-eye-close').addClass('fa-eye-open');
    }
  });
  
  // 監(jiān)聽兩個(gè)input值的change事件，修改另一個(gè)input的值，保證二者一致
  $('#password1').change(function() {
    $('#password2').val($(this).val());
  });
  $('#password2').change(function() {
    $('#password1').val($(this).val());
  });
</script>

4、注意事項(xiàng)：

　　a、本文代碼使用了jquery，需引入；使用了字體圖標(biāo)，需引入；

　　b、IE中默認(rèn)對(duì)type為password的input設(shè)置了眼睛圖標(biāo)用于顯示密碼，對(duì)type為text的input設(shè)置了×號(hào)圖標(biāo)用于清除內(nèi)容，本文將其設(shè)置為隱藏，保證瀏覽器兼容性；

　　c、因?yàn)閮蓚€(gè)input保存的值是一致的，因此在校驗(yàn)和提交表單時(shí)，只需處理其中一個(gè)即可。

其他方法：

為什么要用隱藏接收他的密碼呢，哪用這么復(fù)雜！？直接用jquery改變密碼輸入框的type屬性為text啊，源碼如下：

if ($("#pwd").attr("type") == "password")
{
  $("#pwd").attr("type", "text");
} else {
  $("#pwd").attr("type", "password");
}