<input /> 类型转换（jQuery）答案

【问题标题】：<input /> type conversion (jQuery)<input /> 类型转换（jQuery）
【发布时间】：2010-12-25 03:16:52
【问题描述】：

我有这个：

<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 问题了解我为什么要这样做）

这可行，但只有一个问题，我需要单击两次才能输入密码字段：

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

我该如何解决这个问题？

谢谢！

【问题讨论】：

标签： jquery html dom input passwords

【解决方案1】：

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

以下应该可以工作（经过测试，但仅在 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

【讨论】：

【解决方案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" />

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

【讨论】：

【解决方案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>

【讨论】：