使用 jQuery 将 HTML 文本输入更改为密码输入答案

【问题标题】：Using jQuery to change HTML text input to password input使用 jQuery 将 HTML 文本输入更改为密码输入
【发布时间】：2011-11-03 18:18:42
【问题描述】：

我有一个默认值“密码”的文本输入。

当用户点击此字段时，即当焦点设置到此文本字段时，我想将输入类型更改为密码..

我已经使用 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>

结果：它不会将类型更改为密码，它只是保持为文本...

【问题讨论】：

标签： jquery html text input passwords

【解决方案1】：

更好的解决方案是使用 placeholder 属性，它可以完全实现您想要的效果，而无需担心更改输入框的类型。

否则，您将希望将该属性作为属性而不是作为属性使用：

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

【讨论】：

【解决方案2】：

您不能使用 jQuery 更改 input 元素的 type。原因是它在 Internet Explorer 中是不可能的，所以 jQuery 阻止你在任何浏览器中这样做（因为它旨在提高跨浏览器的兼容性等等）。

看看.attr() docs：

注意： jQuery 禁止更改 or 的 type 属性元素，并将在所有浏览器中引发错误。这是因为无法在 Internet Explorer 中更改 type 属性。

您的问题的一个潜在解决方案可能是将文本（在 span 或 div 或您真正喜欢的任何内容中）覆盖到 type="password" 输入上，并隐藏 focus 上的文本。

【讨论】：

【解决方案3】：

看看HTML5的占位符属性，可以实现这个效果。

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

不过，如果您想支持旧版 IE，您可能需要考虑备用方案。

【讨论】：

【解决方案4】：

这不是直接可能的。 jQuery 甚至有它自己的内置错误消息：

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

相反，您可以使用具有完全相同位置和大小的另一个元素（密码一个）。输入是可见的，而密码最初是不可见的。然后，您可以在它们之间切换：

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

请确保将密码集中在一个。

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

【讨论】：

【解决方案5】：

使用HTML5 placeholder 属性将完成此操作。例如：

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

需要一个 javascript / jQuery 解决方案来支持不支持 HTML5 的客户端。

【讨论】：

【解决方案6】：

按照建议，您应该使用placeholder 和插件让它在 IE 中工作。话虽如此，如果你仍然想改变input的类型并且不需要支持IE，你可以使用jQuery中的prop方法来完成：

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

【讨论】：