2011-07-08 86 views
2

我试图实现一个简单的技巧,当用户开始在各自的文本框中输入文本时,会隐藏文本框内的跨度/标签,并显示它,如果文本框为空模糊。显示和隐藏文本框中的跨度/标签文本

(它在形式用户登录实现) 到目前为止,这件事情是工作很好,而且这里是demo

但它在以下情况下会失败:

1)如果用户输入用户名,前面输入用户名列表(关闭自动完成时由浏览器存储的表单数据)。如果用户用鼠标从列表中单击选择用户名,密码字段会自动填充。现在虽然密码字段有它的价值,它不会隐藏跨度。 (KEYDOWN /对焦/点击/改变了文本事件在这种情况下没有帮助)

a busy cat

2)当用户名/密码错误,重新加载页面,用户名文本框中有最后输入的值。但仍然显示它的跨度。 (我试过检查用户名文本框是在页面加载空的。它没有工作)

a busy cat

谁能帮我解决这些事情?

在此先感谢... :)

+0

我无法复制其中的任何内容,也没有任何用户名列表的提示。 –

+0

您可能无法在我提供的演示中看到它。如果自动完成功能被关闭,该列表实际上是由浏览器存储的表单数据。 (我会编辑这个问题) – Bongs

回答

2

你需要什么,我是个placholder。占位符已被html5 标准化,可以通过各种jquery插件(这里是one)轻松实现。

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

看ATH这种形式在这里我实现placholders:http://www.consiglio.regione.lombardia.it/web/crl/BancheDati/atti_si

当您插入在输入栏中输入字母,文字消失。这是在该插件的帮助下完成的。

+0

@Nicola ...我会试试它... – Bongs

+0

占位符在我的情况下完美。感谢:D – Bongs

0

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

+0

大声笑... @Adam的答案是否...如果你检查问题,我把链接演示,我已经实施的东西。但在这种情况下,它在给定2个案例中失败。我想修复它。 – Bongs

+0

你说你的问题的方式不会使它听起来好像它不同于我的答案中引用的一般输入水印。你试图做什么不同?我预计使用已经罐装的解决方案会让你受益,所以你不必在多个浏览器/版本上处理测试(当你自己动手时,这总是很痛苦)。 –

+0

@亚当..我要把截图,这可能会给你一些想法。 – Bongs

0

可用性的角度来看,我不认为这将是可怕的隐藏的两个输入水印无论哪个上被点击/ keydowned等。现在这一个选项是有争议的,所以你已经被警告...

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

只是想确保你意识到这一点 - 最常用的防止信用卡领域,从自动填充。希望在这里有所帮助。

+0

为了方便用户,自动填充在用户名字段上为ON。我将在一段时间添加屏幕截图... – Bongs