輸入密碼顯示和隱藏

Question

我希望我不會因為一個問題而打擾你 :) 。 我對編寫代碼知之甚少，所以遇到了錯誤有兩個輸入我在點擊時添加了一個帶引導程序的眼睛圖標，密碼出現第一個輸入有效，但第二個輸入不顯示密碼你認為是什么問題。 抱歉我的英語不好。

<form method="post" id="your_form_id" enctype="index.php">
<div class="input-container">
<input type="password" name="password" placeholder="Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
  if (password) {
    input.setAttribute('type', 'text');
    visibilityToggle.innerHTML = 'visibility';
  } else {
    input.setAttribute('type', 'password');
    visibilityToggle.innerHTML = 'visibility_off';
  }
  password = !password;
  
});
</script>

<input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br>
    
<div class="input-container">
    <input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
  if (password) {
    input.setAttribute('type', 'text');
    visibilityToggle.innerHTML = 'visibility';
  } else {
    input.setAttribute('type', 'password');
    visibilityToggle.innerHTML = 'visibility_off';
  }
  password = !password;
  
});
</script>

Answer 1

document.querySelector將返回頁面中的第一個元素。 因此，您的邏輯適用於第一個輸入，但不適用於第二個輸入，因為document.querySelector仍將返回第一個元素。

您可以使用document.querySelectorAll然后使用索引來訪問您的輸入，如下所示-

 const visibilityToggle1 = document.querySelectorAll('.visibility')[0]; const input1 = document.querySelectorAll('.input-container input')[0]; var password1 = true; visibilityToggle1.addEventListener('click', function() { if (password1) { input1.setAttribute('type', 'text'); visibilityToggle1.innerHTML = 'visibility'; } else { input1.setAttribute('type', 'password'); visibilityToggle1.innerHTML = 'visibility_off'; } password1 = !password1; }); const visibilityToggle2 = document.querySelectorAll('.visibility')[1]; const input2 = document.querySelectorAll('.input-container input')[1]; var password2 = true; visibilityToggle2.addEventListener('click', function() { if (password2) { input2.setAttribute('type', 'text'); visibilityToggle2.innerHTML = 'visibility'; } else { input2.setAttribute('type', 'password'); visibilityToggle2.innerHTML = 'visibility_off'; } password2 = !password2; });

 <form method="post" id="your_form_id" enctype="index.php"> <div class="input-container"> <input type="password" name="password" placeholder="Password" required="on"><br><br> <i class="material-icons visibility">visibility_off</i> </div> <input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br> <div class="input-container"> <input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br> <i class="material-icons visibility">visibility_off</i> </div> </form>

由於多個變量同名，我已經編輯了您的代碼。 我已將1附加到第一個輸入的變量，並將2附加到第二個輸入的變量。

正如其中一條評論中提到的，我在此處為兩個輸入復制了事件偵聽器，只是為了演示目的，但是您可以通過循環將相同的事件偵聽器附加到兩個輸入，並向事件偵聽器提供自定義參數。