Question

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

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

我使用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占位符属性，可以达到此效果。

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

如果你想支持旧的IE，你可能不得不考虑后备。

Answer 3

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

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

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

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

请务必将密码集中在一起。

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

Answer 4

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

查看.attr() docs：

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

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

Answer 5

使用HTML5 placeholder属性可以实现此目的。例如：

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

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

Answer 6

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

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

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

6 个答案: