我有一个常用的登录表单，其中包含两个输入字段，一个用于登录，一个用于密码。我目前正在尝试添加一个控件，它将输入的密码显示为纯文本，以便用户可以检查它是否有错别字。
问题是浏览器（至少是 Firefox）不允许动态更改输入字段的type 属性，所以我不能只将type="password" 更改为type="text"。另一个问题是浏览器不允许获取密码字段的值，所以我不能创建一个新的input type="text" 并将其值设置为密码的值。我见过几种不同的方法来完成这项任务，包括this one，但它们只有在输入密码时才能工作，而在浏览器自动填充密码时会失败。
因此，欢迎提出任何建议。我正在使用 jQuery。
【问题讨论】：
标签： javascript jquery browser passwords
你可以这样做：
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password
【讨论】：
如果可以的话，我认为以文本形式显示密码不是一个好主意，原因如下：
我还认为，如果您只是想帮助用户避免拼写错误，请在禁用密码之前给他们更多机会。我认为大多数网站实施的典型“3”并不是真正需要的，我建议“10”尝试，或者“5”，如果你真的很保守的话，是完全可以接受的。只需为他们倒数，让他们自己解决拼写错误。
只是我的拙见。
【讨论】：
我自己从未尝试过，但你不能只访问元素的 value 属性吗？
如果你有类似...
<input id="pw" name="pw" type="password" />
然后在 JavaScript / jQuery...
var pass = document.getElementById('pw').value;
$('pw').val()
【讨论】：
出于安全原因，不可能显示自动填充的密码。如果可能，任何人都可以在您的计算机上看到此页面的密码。
您必须处理以下问题以获得完整的解决方案：
通过这个 jQuery 关闭自动完成功能
$('input').attr('autocomplete', 'off');
要即时添加复选框，您可以使用http://www.cuptech.eu/jquery-plugins/ 提供的以下 jquery-showPassword 插件
【讨论】：
$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
这样的东西会找到输入区域，并将值存储在一个名为 showValue 的变量中。然后你可以用 type="password" 替换元素，用 type="text" 的新 html，如果未选中该复选框，则该值将被放入密码类型字段中。
此方法存在一个问题，即密码类型值将在代码中可见，但要解决此问题，您始终可以从密码类型中删除 value 属性并强制用户重新输入。如果你可以在你的应用程序中接受它。
【讨论】：
function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
【讨论】：
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
【讨论】：