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

【问题标题】：show and hide Span/Label text in textbox在文本框中显示和隐藏跨度/标签文本
【发布时间】：2011-07-08 08:29:44
【问题描述】：

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

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

但在以下情况下失败：

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

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

谁能帮我解决这些问题？

提前谢谢... :)

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

大声笑...@Adam 答案是否定的...如果您检查问题，我将链接 Demo 放在我已经实现的地方。但在这种情况下，它在给定的 2 种情况下失败。我想把它修好。
您陈述问题的方式并没有使它听起来与我的答案中的 url 引用的一般输入水印不同。您尝试做的事情有何不同？我预计使用已经固定好的解决方案将使您受益，因此您不必在多个浏览器/版本上进行测试（滚动您自己的版本总是很痛苦）。
@Adam.. 我要放截图，这可能会给你一些想法。

【解决方案3】：

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

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

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

【讨论】：