jQuery：带有可读标签的密码字段？

我为当前名为insidelabel（）的项目编写了这个非常简单的函数，让我为输入中的输入字段添加描述（标签）。

//Label inside of inputfields function insidelabel(selector, name) { $(selector).val(name); $(selector).css({'color':'#999'}); $(selector).focus(function () { //Input Value if ($(this).val() == name) { $(this).val(''); } $(this).css({'color':'#000'}) }); $(selector).blur(function () { if ($(this).val() == '') { $(this).val(name); } if ($(this).val() == name) { $(this).css({'color':'#999'}); } }); } insidelabel('.t', 'name'); insidelabel('.p', 'enter password'); 

因此，当输入被聚焦时，文本消失，当它模糊时，它再次具有相同的文本。

但是现在我想知道如何扩展该function以在密码字段中包含标签！ 听起来很奇怪……解释：我想要一个密码字段（ type="password" ），在其中有一个可读标签（如“输入密码”）。 一旦用户输入文本，密码应该是不可读的（点线）。 我知道，这个解释真的很糟糕，但我想你可能会得到我的意思。

我想知道最好的方法是什么？ 我应该查询输入字段是否为type="password" ，如果是，我将其设置为type="text" – 输入文本后我再次将其设置为type="password" 。 知道什么是最好的解决方案吗？

这是我的例子： http ： //jsfiddle.net/R8Zxu/

Answer 1

如果您使用位于（透明） 下的真实而不是使用value属性（具有一些主要的可访问性含义）伪装它，那么您可以执行以下操作： http ： //dorward.me.uk/ TMP /标签工作/ example.html的

不要尝试更改现有输入的类型。 Internet Explorer不会让你。

Answer 2

确定Web应用程序，但如果你想在iPhone应用程序上使用页面，那么它无法正常工作，正确答案请参阅此处 – http://blog.stannard.net.au/2011/01/07/creating-a -forms与-标签-内部文本字段-使用- jQuery的/

Answer 3

是的，那将是正确的方法。 这在文本字段中称为“水印”，并且由于密码输入字段使用不同的文本显示机制，因此当水印处于活动状态时，您可能希望将其切换为文本类型。 OnFocus，您可以将其切换出来（如果需要），将焦点放在新文本字段上。

请记住，在弄乱值之前，你需要转换为type =“text”; 当它是type =“password”时有限制。