时间戳

首页 > 解决方案 > 输入密码显示和隐藏

javascript - 输入密码显示和隐藏

问题描述

我希望我不会用问题来打扰你:)。我对编写代码知之甚少，所以遇到了错误有两个输入我在点击时添加了一个带有引导程序的眼睛图标，密码出现第一个输入有效，但第二个输入不显示密码你认为是什么问题。对不起我的英语不好。

<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>

在此处输入图像描述

标签： javascriptphphtmlcss

解决方案

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的变量和第二个输入的变量。

正如其中一条评论所提到的，我在这里为两个输入复制了事件侦听器，仅用于演示目的，但是您可以通过循环将相同的事件侦听器附加到两个输入并为事件侦听器提供自定义参数。

推荐阅读