jquery - <input/>类型转换(jQuery)

Question

我有这个:

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

... onclick/onfocus，我想将输入类型更改为“密码”并删除值，如下所示:

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

这似乎不起作用:

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

(请参阅 this 问题了解我为什么要这样做)

---

这行得通，但只有一个问题，我需要点击两次才能在 pass 字段中输入:

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 中时，您不能更改类型属性，但如果您先将其删除，则可以。

以下应该有效(已测试，但仅在 Firebug 中)。密码类别将被保留，因为它与您再次插入的元素相同。

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