Как управлять двумя полями пароля одним флажком?
-
11-10-2019 - |
Вопрос
<form>
<fieldset>
Password: <span id="capsalert">CAPS LOCK = on</span><br>
<input type="password" id="pwd">
<script type="text/javascript">
document.write(
'<input type="checkbox" name="masking" onclick="unmask(this.checked)"> ' +
'Show the password as I type'
);
</script>
<br>
Password2:<br>
<input type="password" id="pwd2">
</fieldset>
</form>
<script type="text/javascript">
function chkCaps(e) {
ev = (e ? e : window.event);
kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false));
sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !!(ev.modifiers & 4) : false));
if(
(kc >= 97 && kc <= 122 && sk) ||
(kc >= 65 && kc <= 90 && !sk)
) {
document.getElementById('capsalert').style.display = 'inline';
}
else {
document.getElementById('capsalert').style.display = 'none';
}//end if
}//end function
function unmask(truefalse) {
oldElem = document.getElementById('pwd');
elem = document.createElement('input');
elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
elem.setAttribute('value', document.getElementById('pwd').value);
elem.id = 'pwd';
oldElem.parentNode.replaceChild(elem,oldElem);
document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); };
}//end function
document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); };
</script>
Я использую приведенный выше код в немного более сложной форме.
У меня есть два отдельных полях «пароля» в форме. С помощью текущего кода у меня может быть первое поле пароля, показывающее символы, так как они вводятся при тикаже флажок.
Кроме того, код уведомляет пользователя, если он печатает с включенной блокировкой Caps.
Я хотел бы иметь оба поля пароля, демонстрирующие одно и то же поведение, а не только первое поле. К сожалению, я не знаю, как это сделать.
Спасибо за помощь.
РЕДАКТИРОВАТЬ:
Простое решение может быть легче найти со следующим кодом. Я готов использовать любой из них.
<script>
function changeType()
{
document.myform.pass.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'password':'text';
}
</script>
<body>
<form name="myform">
<input type="password" name="pass" />
<input type="password" name="pass2" />
<input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
Решение 5
Большинство ответов не сработало. Один или два я оставил не подлечить, потому что они означали большие изменения в моем коде, чем я хотел. В итоге я нашел еще один метод раскрытия паролей: "Показать пароль как текст" управление
Я адаптировал метод там к своему сценарию поля с несколькими паролями:
<input type="checkbox" onchange="document.getElementById('gpwd').type = this.checked ? 'text' : 'password'; document.getElementById('pwd1').type = this.checked ? 'text' : 'password'; document.getElementById('pwd2').type = this.checked ? 'text' : 'password'"> Reveal passwords
Другие советы
Почему бы тебе просто не изменить type
атрибут вводов пароля в вашем unmask()
функция? Таким образом, вам будет легче управлять более чем 1 поле. После проверки, нужно ли вам повернуть input
в а text
один или а password
один, сделай это:
// Suppose 'new_type' is either 'text' or 'password'
// and that 'pwd' and 'pwd2' are the id attributes for
// both of your password fields
document.getElementById('pwd').type = new_type;
document.getElementById('pwd2').type = new_type;
Я предлагаю немного изменить ваш подход.
Вы можете изменить клиента без какого -либо влияния на код сервера. Например, я бы попробовал использовать 2 окна ввода с тем же именем. Если у вас когда -либо есть одна ящик, в то время как у другого есть набор атрибутов «Отключен» HTML, видимое поле всегда будет единственным отправленным.
Таким образом, ваш код на стороне сервера должен был бы найти только 1 ввод под одним именем.
jQuery Шапки блокировки тест/функция? Установите оба поля в класс пароля и:
jQuery('.password').caps(function(caps){
if(jQuery.browser.safari) return; // Safari already indicates caps lock
// "this" is current element
if(caps){
alert('Your caps lock is on!');
}else{
// no caps lock on
}
});
Попробуй это:
function chkCaps(e) {
ev = (e ? e : window.event);
kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false));
sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !! (ev.modifiers & 4) : false));
if ((kc >= 97 && kc <= 122 && sk) || (kc >= 65 && kc <= 90 && !sk)) {
document.getElementById('capsalert').style.display = 'inline';
} else {
document.getElementById('capsalert').style.display = 'none';
}
//end if
}
//end function
function unmask(truefalse) {
for (var f in new Array('pwd', 'pwd2')) {
oldElem = document.getElementById(f);
elem = document.createElement('input');
elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
elem.setAttribute('value', document.getElementById(f).value);
elem.id = f;
oldElem.parentNode.replaceChild(elem, oldElem);
document.getElementById(f).onkeypress = function (e) {
chkCaps(e);
};
}
}
//end function
document.getElementById('pwd').onkeypress = function (e) {
chkCaps(e);
};
document.getElementById('pwd2').onkeypress = function (e) {
chkCaps(e);
};
Что это делает, так это так, чтобы ваш код работал pwd
а также pwd2
Повторяя его для каждого элемента в массиве new Array('pwd', 'pwd2')
.