Question

我有这个：

<input type="text" value="Enter Password" class="password" />

... onclick / onfocus，我想将输入类型更改为'password'并删除值，如下所示：

<input type="password" value="" class="password" />

这似乎不起作用：

$('input.password').click(function () {
            $(this).attr('type', 'password');
    });

（请参阅this问题，了解我为何要这样做）

这有效，但只有一个问题，我需要点击两次才能输入通行字段：

var passField = $("input.password");
        var passFieldNew = passField.clone();
        $('input.password').click(function () {
            passFieldNew.attr("type", "password");
            passFieldNew.attr("value", "");
            passFieldNew.insertBefore(passField);
            passField.remove();
        });

我该如何解决这个问题？

谢谢！

Answer 1

当元素在DOM中时，您无法更改类型attr，但如果您先删除它，则可以。

以下应该有效（经过测试，但仅限于萤火虫）。密码类将被保留，因为它与您再次插入的元素相同。

var $pwd = $('input.password').remove(); // Note, might be better to select on ID
$pwd.attr('type', 'password');
$pwd.val('');
$('#ABC').after($pwd); // Insert it somewhere in the DOM again

Answer 2

如果你有一个隐藏的密码字段，当你获得焦点时你为文本字段交换了什么？像这样（未经测试）：

  <style type="text/css" media="screen">
    #password {
      display: none;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#text').focus(function() {
        $(this).hide();
        $('#password').show().focus();
      });
    });
  </script>

  <input type="text" value="Enter Password" class="password" id="text" />
  <input type="password" value="" class="password" id="password" />

当文本字段获得焦点时，它会隐藏自身，显示密码字段，并将焦点设置为密码字段。如果您将文本字段和密码字段设置为相同，则应该是无缝的。

Answer 3

您无法在运行时更改输入字段的类型，但您可以通过将其替换为新的来进行狡猾的切换：

<script type="text/javascript">
$(function()
{
    var password = $("#myPassword").val();
    $("#myPassword").remove();
    $("#form").append('<input id="myPassword" type="text" class="password" />');
    $("#myPassword").val(password);
});
</script>

<div id="form">
    <input id="myPassword" type="password" value="Enter Password" class="password" />
</div>

<input />类型转换（jQuery）

3 个答案: