<input />類型轉換（jQuery的）

Question

我有此：

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

...的onclick /聚焦狀態，我想改變輸入類型 '密碼' 和值取出，像這樣：

<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>