Javascript 在两个输入中显示/隐藏密码

我正在尝试构建一个表单，用户可以在其中更改两个密码输入的值，一个用于密码，另一个用于验证密码

因此，为了让用户知道他键入了什么，并确保他/她的两个密码彼此匹配，他尝试实现一种方法，在这种方法中，他可以选中一个复选框来显示他的密码

当前的javascript方法只使用一个输入，但我希望它同时使用两个输入，而不是一个输入。我还想显示两个输入的密码，而不必选中各自对应的复选框（例如，如果选中一个复选框，则应在两个输入中显示文本）

这是我目前使用的javascript方法：

//第一个代码//
函数addEvent（el、事件、回调）{
如果（'addEventListener'在el中）{
el.addEventListener（事件、回调、假）；
}否则{
el['e'+事件+回调]=回调；
el[事件+回调]=函数（）{
el['e'+事件+回调]（window.event）；
};
el.attachEvent（'on'+事件，el[事件+回调]）；
}
}
函数removeEvent（el、事件、回调）{
如果（'removeEventListener'在el中）{
el.removeEventListener（事件、回调、false）；
}否则{
el.detachEvent（'on'+事件，el[事件+回调]）；
el[事件+回调]=空；
el['e'+事件+回调]=null；
}
}
//第二代码//
（功能（）{
var pwd=document.getElementById（'password'）；
var chk=document.getElementById（'showpass'）；
addEvent（chk，'change'，函数（e）{
var target=e.target | | e.src元素；
试试{
如果（target.checked）{
password.type='text'；
}否则{
password.type='password'；
}
}捕获（错误）{
警报（“此浏览器无法切换类型”）；
}
});
}());

密码
确认密码
立即更改两种输入的类型：

var pwd = document.getElementById('password');
var confirm = document.getElementById('password2');

...

if (target.checked) {                  
    pwd.type = 'text';              
    confirm.type = 'text';              
} else {                               
    pwd.type = 'password';         
    confirm.type = 'password';              
}

立即更改两个输入的类型：

var pwd = document.getElementById('password');
var confirm = document.getElementById('password2');

...

if (target.checked) {                  
    pwd.type = 'text';              
    confirm.type = 'text';              
} else {                               
    pwd.type = 'password';         
    confirm.type = 'password';              
}

添加了一个小提琴来切换密码类型


JS

var $vp = $('.vp');
$vp.on('click', function() {
    var $target = $(this).siblings('input[name*="password"]');
  if ($target.attr('type') == "password") {$target.attr('type','text');}
  else {$target.attr('type','password');}
});

HTML

<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 1</p>
    <input type="password" name="password" val="" />
    <span class="vp">View password</span>
</div>
<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 2</p>
    <input type="password" name="password2" val="" />
    <span class="vp">View password</span>
</div>


密码1

查看密码
密码2

查看密码

该函数查找span“vp”的click事件和get的同级输入元素，检查type属性并在text/password之间切换。输入的名称必须包含“password”（小写）。
添加了一个小提琴来切换密码类型


JS

var $vp = $('.vp');
$vp.on('click', function() {
    var $target = $(this).siblings('input[name*="password"]');
  if ($target.attr('type') == "password") {$target.attr('type','text');}
  else {$target.attr('type','password');}
});

HTML

<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 1</p>
    <input type="password" name="password" val="" />
    <span class="vp">View password</span>
</div>
<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 2</p>
    <input type="password" name="password2" val="" />
    <span class="vp">View password</span>
</div>


密码1

查看密码
密码2

查看密码

该函数查找span“vp”的click事件和get的同级输入元素，检查type属性并在text/password之间切换。输入的名称必须包含“password”（小写）。
如果要通过选中一个复选框本身来设置可见性，那么为什么首先需要第二个复选框？请注意，id属性设计为每个元素都是唯一的。但您在两个支票盒上都有id=“showpass”，这仅仅是因为外观。我使用的是Bootstrap，只有一个复选框看起来会很尴尬……这就是为什么。如果您想通过选中一个复选框来设置可见性，那么为什么首先需要第二个复选框？请注意，id属性被设计为每个元素都是唯一的。但您在两个支票盒上都有id=“showpass”，这仅仅是因为外观。我用的是Bootstrap，只有一个复选框看起来会很尴尬…这就是为什么。