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

Question

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

(在用户登录表单上实现)到目前为止，这件事工作正常，这是 demo

但在以下情况下会失败:

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

2) 当用户名/密码错误时，页面重新加载，用户名文本框已上次输入的值。但仍然显示其跨度。(我尝试检查页面加载时用户名文本框是否为空。它不起作用)

谁能帮我解决这些问题吗？

提前致谢...:)

Answer 1

你需要的是一个占位符。占位符已标准化为 html5 并且可以通过各种jquery插件轻松实现(这里是 one )。

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

看看我在其中实现占位符的表单:http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

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