用于切换密码和文本类型的 Javascript 不起作用答案

【问题标题】：Javascript For Toggling Password And Text Type Not Working用于切换密码和文本类型的 Javascript 不起作用
【发布时间】：2014-07-23 04:19:49
【问题描述】：

我正在尝试使用 javascript 来切换输入 type="password" 和 "text" 以显示密码或隐藏密码。但它非常适合一个领域。但不适用于 3 个字段。

当用户检查“显示密码”选项时，它被设置为 type="text" 并且用户可以看到密码而不是点。但是当用户取消选中显示密码选项时，它没有设置 type="password"

代码如下：

在头部-->>

<script>
function changeType()
{
    document.form_signup_info.old_password.type=(document.form_signup_info.option.value=(document.form_signup_info.option.value==1)?'-1':'1')=='1'?'text':'password';
}
function changeType1()
{
    document.form_signup_info.new_password.type=(document.form_signup_info.option.value=(document.form_signup_info.option.value==1)?'-1':'1')=='1'?'text':'password';
}
function changeType2()
{
    document.form_signup_info.cpassword.type=(document.form_signup_info.option.value=(document.form_signup_info.option.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>

在正文部分 -->>

<label>Old Password :</label>
<input type="password" name="old_password" id="old_password" placeholder="Old Password*">
<label><input type="checkbox" name="option" value='-1' onchange="changeType()" />Show Old Password</label>


<label>New Password :</label>
<input type="password" name="new_password" id="new_password" placeholder="New Password*">
<label><input type="checkbox" name="option" value='-1' onchange="changeType1()" />Show New Password</label>


<label>Confirm New Password :</label>
<input type="password" name="cpassword" id="cpassword" placeholder="Confirm New Password*">
<label><input type="checkbox" name="option" value='-1' onchange="changeType2()" />Show Confirm Password</label>

【问题讨论】：

标签： javascript html passwords

【解决方案1】：

我为每个字段设置了不同的选项，并且效果很好。我的新代码如下..

 <script>
 function changeType()
 {
    document.form_signup_info.old_password.type=(document.form_signup_info.option.value=(document.form_signup_info.option.value==1)?'-1':'1')=='1'?'text':'password';
}
function changeType1()
{
document.form_signup_info.new_password.type=(document.form_signup_info.option1.value= (document.form_signup_info.option1.value==1)?'-1':'1')=='1'?'text':'password';
}
function changeType2()
{
document.form_signup_info.cpassword.type=(document.form_signup_info.option2.value=(document.form_signup_info.option2.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>



 <label>Old Password :</label>
 <input type="password" name="old_password" id="old_password" placeholder="Old Password*">
 <label><input type="checkbox" name="option" value='-1' onchange="changeType()" />Show Old Password</label>


 <label>New Password :</label>
 <input type="password" name="new_password" id="new_password" placeholder="New Password*">
 <label><input type="checkbox" name="option1" value='-1' onchange="changeType1()" />Show New Password</label>


 <label>Confirm New Password :</label>
 <input type="password" name="cpassword" id="cpassword" placeholder="Confirm New Password*">
 <label><input type="checkbox" name="option2" value='-1' onchange="changeType2()" />Show Confirm Password</label>

【讨论】：

【解决方案2】：

使用type 属性：

document.getElementById('old_password').type = "text";

JSFiddle

或使用setAttribute

document.getElementById('old_password').setAttribute('type', 'text');

【讨论】：