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

Question

我在输入字段中放置了标签，以便在背景中显示说明性文本，当用户在字段中键入时，文本消失。我正在使用此处解释的示例：如何在 <input> 元素内创建标签？ 特别是在http://attardi.org/

当密码被浏览器保存时，例如在谷歌浏览器中，文本变得像这张图片一样乱码（目前在我的本地计算机上）：

已保存密码的背景文本不会消失。任何帮助将不胜感激 - 谢谢。

Answer 1

您还可以利用新placeholder属性。在这里阅读。

不过不IE支持。

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

此代码将进入文档就绪函数：

$(function() {
    // Handler for .ready() called.
});

Answer 2

只需使用placeholder属性——它就是这么简单：

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

从字面上看，就是这样；浏览器将处理该行为。

是的，它不能在 IE 中工作（直到 IE10 发布）——但无论如何你已经在字段旁边有了标签，所以 IE 用户不会无法分辨哪个字段是哪个字段。

Answer 3

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

当 Chrome 尝试执行密码自动保存过程并且不查看是否有以前输入的值时，占位符属性也会发生这种情况。

感谢大家的投入。