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

Question

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

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

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

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

Answer 1

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

否则，您将希望使用以下方法将该属性作为属性而不是属性来寻址：

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

Answer 2

看看HTML5的placeholder属性，就可以实现这样的效果。

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

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

Answer 3

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

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

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

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

但请确保将密码设为焦点。

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

Answer 4

您无法使用 jQuery 更改 input 元素的 type。原因是它在 Internet Explorer 中是不可能的，因此 jQuery 阻止您在任何浏览器中执行此操作（因为它旨在提高跨浏览器兼容性等）。

查看 .attr() 文档：

注意： jQuery 禁止更改或的类型属性
元素并会在所有浏览器中抛出错误。这是
因为类型属性无法在 Internet Explorer 中更改。

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

Answer 5

使用 HTML5 占位符属性将实现这一点。例如：

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

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

Answer 6

正如建议的，您应该使用 placeholder 和插件来使其在 IE 中工作。话虽这么说，如果您仍然想更改 input 的类型并且不需要支持 IE，则可以使用 prop jQuery 中的方法：

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