使用保存的密码使输入元素内的标签消失

Question

我在输入字段中放置了标签，以便在后台显示说明文字，当用户在字段中输入内容时，文字会消失。我正在使用此处说明的示例：How to create a label inside an <input> element? 特别是在http://attardi.org/

当密码虽然由浏览器保存时（例如在Google Chrome中），文本会像在此图像中一样出现乱码（目前在我的本地计算机上）：

保存的密码背景文本不会消失。任何帮助都会很有意义 - 谢谢。

Answer 1

您还可以利用新的placeholder属性。 Read about it here

不支持IE。

选项2将使用Jquery。由于您已经在Jquery解决方案中使用label，因此您可以在文档加载后添加检查value的{​​{1}}的代码，然后显示或隐藏{ {1}}相应的。

此代码将进入document ready function：

input

Answer 2

只需使用placeholder属性 - 就这么简单：

<input type="email" placeholder="email" />

从字面上看，就是这样;浏览器会处理这种行为。

是的，它在IE中不起作用（直到IE10发布） - 但是你已经在字段旁边有了标签，所以它不像IE用户将无法分辨哪些字段是哪个。

Answer 3

我进一步调查，这只发生在谷歌浏览器而不是Mozilla Firefox。我的设置是正确的，看起来它可能实际上是Chrome中的一个错误。请参阅问题日志：http://code.google.com/p/chromium/issues/detail?id=117661

当Chrome尝试执行密码自动保存过程并且不查看是否存在先前输入的值时，这看起来也会出现占位符属性。

感谢所有人提供的意见。