如何让一个复选框控制两个密码字段？

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

来源

2010-12-20 David

大部分的答案没有工作。有一两个我未尝试过，因为它们意味着我的代码比我想要的更大。我最终找到另一种方法来揭示密码："Show password as text" control
我适应的方法有我多密码字段的情景：

<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

来源

2010-12-20 21:44:57 David

你为什么不只是改变的密码输入type属性，为unmask()功能？这样，你可以更容易地管理超过1个字段。

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

来源

2010-12-20 16:31:56 ncuesta

我建议改变你的做法有点：检查你是否有打开input成text一个或password一个，执行此操作后。

您可以修改客户端而不影响服务器代码。例如，我会尝试使用2个具有相同名称的输入框。如果您有一个框可见，而另一个框的“禁用”HTML属性设置，则可见框始终是唯一提交的框。

这样，您的服务器端代码只需要在一个名称下查找1个输入。

来源

2010-12-20 16:34:12 bug

试试这个：

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')中重复它的每一个元素。

来源

2010-12-20 16:35:40 zsalzbank

，对于盖在这两个领域的工作警戒，BU现在的复选框什么都不做。 – David 2010-12-20 16:43:53

现在就试试 - 我正在做我的头顶，对不起。我改变了数组的初始化 – zsalzbank 2010-12-20 17:39:11

jQuery caps lock test/function？设置这两个字段级密码和：

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 
    } 
});

来源

2010-12-20 16:36:36 FatherStorm

如何让一个复选框控制两个密码字段？

回答

相关问题