Question

我有一个通常的登录表单，包含两个输入字段，一个用于登录，一个用于密码。我目前正在尝试添加一个控件，将输入的密码显示为纯文本，因此用户可以检查拼写错误。

问题是浏览器（至少是Firefox）不允许动态更改输入字段的type属性，因此我不能只将type="password"更改为type="text"。另一个问题是浏览器不允许获取密码字段的值，因此我无法创建新的input type="text"并将其值设置为密码的值。我已经看到了这个任务的几种不同方法，包括this one，但是只有在输入密码时它们才有效，并且当浏览器自动填充密码时它们会失败。

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

Answer 1

您可以这样做：

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

Answer 2

如果可以，我认为在文本中显示密码并不是一个好主意，原因如下：

这种做法并不常见，因此会让用户感到困惑
这意味着您可以随时查看密码

我也认为，如果您只想帮助用户避免拼写错误，请在密码被禁用前给予他们更多机会。我认为大多数网站实施的典型“3”并不是真正需要的，我建议“10”尝试，或者说“5”，如果你想要真正保守，是完全可以接受的。只要为他们算下来，让他们自己解决错别字。

我的拙见。

Answer 3

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

如果您有类似的东西......

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

然后在JavaScript / jQuery中......

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

$('pw').val()

Answer 4

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

您必须处理以下完整解决方案：

不允许使用javascript - 然后您不应显示选择密码复选框
自动填充已开启 - 正如我所写，您无法以这种方式显示密码。 Eaighter关闭自动完成或隐藏显示密码，直到用户重新输入密码。

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

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

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

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>

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

7 个答案: