jQuery 點擊顯示按鈕顯示密碼框內的密碼

jQuery 點擊顯示按鈕顯示密碼框內的密碼

jQuery代碼爲：

$(document).ready(function() {
  $('#pwd_show').click(function() {
    var passwordInput = $('#password');
    if (passwordInput.attr('type') === 'password') {
      passwordInput.attr('type', 'text');
      $('#pwd_show').html('隱藏');
    } else {
      passwordInput.attr('type', 'password');
      $('#pwd_show').html('顯示');
    }
  });
});

html代碼爲：

<div class="form-group">
<input type="password" name="password" required id="password" placeholder="密碼">
<button id="pwd_show" style="width: 20%; position: absolute; top: 0px; right: 0px; height: 40px;"> 顯示 </button>
</div>

在頁面加載完成後，我們綁定了一個點擊事件到按鈕上。當用戶點擊按鈕時，我們首先獲取密碼輸入框的引用，並檢查它當前的類型是不是密碼類型。如果是，我們將類型改爲文本類型，這樣密碼就能夠被看到。同時，我們將按鈕的文字改爲“隱藏”。如果密碼輸入框不是密碼類型，我們將類型改回密碼類型，並將按鈕的文字改爲“顯示”。這樣，每次用戶點擊按鈕時，我們就可以切換密碼的可見性。