使用jQuery將HTML文本輸入更改爲密碼輸入

我有一個默認值爲「password」的文本輸入。使用jQuery將HTML文本輸入更改爲密碼輸入

當用戶點擊這一領域，即當焦點設置爲文本框此，我想改變輸入類型密碼..

我已經使用jQuery試過，但沒有喜悅：

$("#passwordtxt").click(function(e){ 
    e.stopPropagation(); 
    if($("#passwordtxt").val() == "Password"){  
     $("#passwordtxt").val("");  
    } 
    $("#passwordtxt").attr('type','password'); 
});

這裏是它適用於HTML：

<form name = "loginform" action = "get_login.php" method = "post"> 
    <input id = "emailtxt" name = "username" type="text" size="25" value = "E-mail"/> 
    <input id = "passwordtxt" name = "password" type="text" size="25" value = "Password"/>          
</form>

結果：它沒有類型更改密碼，它只是停留文本...

來源

2011-08-25 user906568

什麼不起作用？ – arnaud576875

更好的解決方案是使用placeholder屬性，它將實現您想要的內容而不用擔心改變輸入框的類型。

否則你將要解決的財產作爲財產而不是使用屬性：

.prop("type", "password");

來源

2011-08-25 14:31:25 Nayish

您不能更改與jQuery的input元素的type。原因是在Internet Explorer中不可能，所以jQuery阻止你在任何瀏覽器中執行它（因爲它意味着提高跨瀏覽器兼容性和所有這些）。

看一看的.attr() docs：

注：的jQuery禁止的或元素上改變類型屬性，並會在所有瀏覽器拋出一個錯誤。這是，因爲在Internet Explorer中不能更改type屬性。您的問題

一個潛在的解決方案可能是文本（在span或div或任何你喜歡真的）覆蓋到type="password"輸入，並隱藏在focus文本。

來源

2011-08-25 14:31:46

看看HTML5佔位符屬性，它可以實現這種效果。

<input type="password" placeholder="Password" />

但是，如果您想支持舊IE，則可能需要查看回退。

來源

2011-08-25 14:32:10 Chris

這不是直接可能的。 jQuery的甚至有其自身內置的錯誤消息：

jQuery.error("type property can't be changed");

相反，你可以有完全相同的位置和大小，另一個元素（密碼之一）。輸入是可見的，而密碼最初不是。然後，您可以在它們之間切換：

$('#input, #password').toggle();

確保將焦點集中在一個。

http://jsfiddle.net/pimvdb/mqq4z/

來源

2011-08-25 14:32:37 pimvdb

它允許我使用'$ .prop（「type」，「password」）'：http://jsfiddle.net/8QVAS/ –

@Shawn Chin：例如，它在IE7中不起作用。 – pimvdb

使用HTML5placeholder屬性將做到這一點。例如：

<input type = "password" placeholder = "Password" />

需要javascript/jQuery解決方案來支持不支持HTML5的客戶端。

來源

2011-08-25 14:33:18

正如所建議的，你應該使用placeholder和插件讓它在IE中工作。話雖這麼說，如果你仍然想改變input的類型，並不需要支持IE，你可以使用jQuery中的prop方法做到這一點：

$("#passwordtxt").prop("type", "password");

來源

2011-08-25 14:34:26

使用jQuery將HTML文本輸入更改爲密碼輸入

回答

相關問題