在文本框中显示和隐藏跨度/标签文本

Question

我正在尝试实现一个简单的技巧，当用户开始在相应的文本框中输入文本时隐藏文本框中的span / label，并在文本框为空时显示模糊。

（在用户登录表单中实施） 到目前为止，这件事工作正常，这里是demo

但它在以下情况中失败：

1）如果用户输入用户名，则会显示先前输入的用户名列表（当自动完成关闭时由浏览器存储的表单数据）。如果用户通过鼠标单击从列表中选择用户名，则密码字段将自动填充。现在虽然密码字段中有值，但它不会隐藏跨度。 （在这种情况下，文本框上的keydown / focus / click / change事件没有帮助）

2）当用户名/密码错误时，页面重新加载，用户名文本框最后输入的值。但仍然显示出它的跨度。 （我试图检查页面加载时用户名文本框是否为空。它不起作用）

任何人都可以帮我解决这些问题吗？

提前致谢...：）

Answer 1

你需要什么我是一个平板电脑。占位符已由html5标准化  并且可以通过各种jquery插件轻松实现（这里是one）。

我建议您使用这些解决方案，因为它们是标准。理想的解决方案是使用html5而不是旧版浏览器的javascript回退。

请查看我执行placholders的表格：http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

在输入字段中插入字母时，文本消失。它是在该插件的帮助下完成的。

Answer 2

看来你正试图在这里重新发明轮子。检查这个已经回答的问题似乎是同一主题： how do I make an html text box show a hint when empty

Answer 3

可用性方面，我认为隐藏两个输入的水印并不是很糟糕，无论点击哪个/ keydowned等等。现在这个下一个选项是有争议的，所以你已被警告......

<input name="first_name" type="text" autocomplete="off">

只是想确保您知道这一点 - 最常用于防止信用卡字段自动完成。希望这里有所帮助。