[英]Show/Hide Password in Two Inputs
我正在尝试构建一种表单,用户可以在其中更改两个密码输入的值,一个用于密码,另一个用于验证密码。
因此,为了使用户知道他键入的内容并确保他/她的两个密码彼此匹配,并尝试实现一种方法,在该方法中,他可以仅选中一个复选框以显示密码。
当前的javascript方法仅适用于一种输入,但我想使其同时适用于两种输入,而不仅仅是一种。 我也想显示两个输入的密码,而不必选中它们自己对应的复选框(例如,如果选中一个复选框,则它应该在两个输入中均显示文本)。
这是我目前拥有的javascript方法:
// First Code // function addEvent (el, event, callback) { if ('addEventListener' in el) { el.addEventListener(event, callback, false); } else { el['e' + event + callback] = callback; el[event + callback] = function () { el['e' + event + callback](window.event); }; el.attachEvent('on' + event, el[event + callback]); } } function removeEvent(el, event, callback) { if ('removeEventListener' in el) { el.removeEventListener(event, callback, false); } else { el.detachEvent('on' + event, el[event + callback]); el[event + callback] = null; el['e' + event + callback] = null; } } // Second Code // (function() { var pwd = document.getElementById('password'); var chk = document.getElementById('showpass'); addEvent(chk, 'change', function(e) { var target = e.target || e.srcElement; try { if (target.checked) { password.type = 'text'; } else { password.type = 'password'; } } catch(error) { alert('This browser cannot switch type'); } }); }());
<!-- First Password --> <div class="form-group"> <label for="password">Password</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <input type="password" name="password" value="" id="password" class="form-control"> <div class="input-group-addon"><input type="checkbox" id="showpass"></div> </div> </div> <!-- Second Password --> <div class="form-group"> <label for="password2">Confirm Password</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <input type="password" name="password2" value="" id="password2" class="form-control"> <div class="input-group-addon"><input type="checkbox" id="showpass"></div> </div> </div>
提前致谢。
一次更改两个输入的类型:
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';
}
添加了一些小提琴来切换密码类型。
https://jsfiddle.net/xpvt214o/321232/
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>
该函数查找跨度“ vp”的click事件并获取其同级输入元素,检查type属性并将其在文本/密码之间来回切换。 输入的名称必须包含“密码”(小写)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.