“将密码显示为文本”控件

Question

我有一个常用的登录表单，由两个输入字段组成，一个用于登录，一个用于密码。我目前正在尝试添加一个控件，它将输入的密码显示为纯文本，以便用户可以检查它是否有拼写错误。

我已经看到了完成此任务的几种不同方法，包括这个方法，但它们仅在输入密码时才起作用，而当浏览器自动填充密码时它们会失败。

因此，欢迎提出任何建议。我正在使用 jQuery。

Answer 1

你可以这样做：

<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password

Answer 2

我自己从未尝试过，但是你不能访问元素的 value 属性吗？

如果你有类似的东西

<input id="pw" name="pw" type="password" />

然后在 JavaScript / jQuery 中...

var pass = document.getElementById('pw').value;

$('pw').val()

Answer 3

如果可以的话，我认为以文本形式显示密码不是一个好主意，原因如下：

1. 这并不常见，所以会让用户感到困惑
2. 这意味着您可以远程查看密码

我还认为，如果你只是想帮助用户避免拼写错误，请在禁用密码之前给他们更多机会。我认为大多数网站实施的典型“3”并不是真正需要的，我建议“10”次尝试，或者“5”（如果您希望真正保守的话）是完全可以接受的。给他们倒数，然后让他们自己解决拼写错误。

只是我的拙见。

Answer 4

出于安全原因，不可能显示自动填充的密码。如果可能的话，任何人都可以在您的计算机上看到您此页面的密码。

您必须处理以下问题才能获得完整的解决方案：

• 不允许使用javascript - 那么您不应该显示选择密码复选框
• 自动完成已打开 - 正如我所写，您无法显示以这种方式填写的密码。第八次关闭自动完成或隐藏显示密码，直到用户重新输入密码。

通过此 jQuery 关闭自动完成功能

$('input').attr('autocomplete', 'off');

要动态添加复选框，您可以使用以下 jquery-showPassword 插件，网址为 http://www.cuptech.eu/jquery-plugins/

Answer 5

$('.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"，并使用新的 html，其中 type="text"，如果未选中该复选框，则该值将被放入密码类型字段中。

此方法存在一个问题，即密码类型值在代码中可见，但是要解决此问题，您始终可以从密码类型中删除 value 属性，然后强制用户重新输入。如果您可以在您的应用程序中接受这一点。

Answer 6

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>

Answer 7

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>