狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

1、需求背景

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

　　隱藏：

　　顯示：

2、實現原理：

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

　　2. 設置兩個字體圖標，一個為睜開的眼睛，一個為閉上的眼睛，用于點擊切換兩個input的顯示，當然，圖標的樣式可以任意定義

　　3. 保證兩個input的值相同

3、代碼實現：

　　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

/* 設置眼睛圖標的樣式 */
.fa{
  width: 24px;
  height:24px;
  cursor: pointer;
  margin-left: -30px; /* 將眼睛圖標放在input框中 */
}
.input-password2{
  display: none; /* 初始狀態隱藏第二個input框 */
}
/* 隱藏掉ie中默認實現的眼睛 */
.input-password1::-ms-reveal {
  display: none;
}
/* 隱藏掉ie中默認實現的x號 */
.input-password2::-ms-clear {
  display: none;
}

3. js

<script type="text/javascript">
  // 監聽切換顯示與隱藏的點擊事件
  $('#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');
    }
  });
  
  // 監聽兩個input值的change事件，修改另一個input的值，保證二者一致
  $('#password1').change(function() {
    $('#password2').val($(this).val());
  });
  $('#password2').change(function() {
    $('#password1').val($(this).val());
  });
</script>

4、注意事項：

　　a、本文代碼使用了jquery，需引入；使用了字體圖標，需引入；

　　b、IE中默認對type為password的input設置了眼睛圖標用于顯示密碼，對type為text的input設置了×號圖標用于清除內容，本文將其設置為隱藏，保證瀏覽器兼容性；

　　c、因為兩個input保存的值是一致的，因此在校驗和提交表單時，只需處理其中一個即可。

其他方法：

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

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