在焦点 jquery 上将占位符输入类型文本更改为密码

Posted 2023-03-05

【中文标题】在焦点 jquery 上将占位符输入类型文本更改为密码

【英文标题】：Change placeholder input type text to password on focus jquery

【发布时间】：2012-09-27 05:05:23

【问题描述】：

好的，我有一个输入标签。我使用了 jquery 输入提示，因此它显示了 title="password"。但如果它的类型是密码，它就不会显示标题，它只会看起来 *。因此，我需要将输入输入为“文本”类型，然后将其更改为输入：焦点上的“密码”，并在失去焦点时返回文本。我如何用 jquery 做到这一点？

<input name="pwd" type="text" class="pwd" value="" title="Password"/>
// look like below on focus and back to text on focus out
<input name="pwd" type="password" class="pwd" value="" title="Password"/>

【参考方案1】：

只需通过 jQuery 中的.prop 方法更改输入类型：

$(document).ready(function() 
    $('#passwordInput').focus(function() 
        $(this).prop('type', 'password').val('');
    );
);

这是一个小提琴：http://jsfiddle.net/7hVjV/

【讨论】：

我在 jsfiddle 链接上试过了。有用。但是第二次尝试点击输入框，但没有输入任何内容，我点击了框外，它说密码已经输入，而实际上我还没有输入任何密码。嗯。

哦，现在我明白了。当您单击框外的任意位置时，这意味着您刚刚输入了一些内容，无需再次输入。这实际上解决了 jquery 部分。哎呀，我希望我能在这里选择两个最佳答案。

【参考方案2】：

你可以使用新的html5属性placeholder，像这样：

<input type="password" name="pass" placeholder="Enter your password" />​

您可以看到here 在浏览器中对该属性的支持。如您所见，IE 7、8 和 9 缺少它，但如果您想支持它们，请查看 answer。

【讨论】：

成功了。尽管与我使用输入提示的方式不同。谢谢！