如何在表单中实现类似Stack Overflow的水印？

Question

我记得在某处找到了一个教程,讲述了如何以更"可用"的方式设置输入表单的样式.

基本上,你有一个占位符值,当你输入输入时,它隐藏了提示.

现在,只是要明确:我不希望提示(占位符值文本)在焦点上消失,而是在我第一次开始输入内容时变得更轻松.很好的例子:

• 查看Aardvark上的表格.这正是我想要输入表单的方式.

• 我们自己的Stack Overflow - 当您尝试提问时,在任何输入表单内部单击时,它不会立即隐藏文本.您可以看到光标以及提示.但是当你开始输入时,它会隐藏提示.(我更喜欢让它变得更浅,而不是隐藏在一起,就像上面的Aardvark例子一样.)

我记得非常清楚地在interwebz上的某个地方阅读了这个具有这个确切要求的教程,但是很难忘,我忘了给它添加书签.

有什么建议/链接吗？

[更新:我最近发现了一个jQuery插件现场标签,它完全符合我的要求.此外,这里是改进同一插件的链接.]

Answer 1

HTML5具有为此任务设计的placeholder属性.

到目前为止,只有WebKit(Safari和谷歌浏览器中使用的渲染引擎)支持它.当不支持占位符时,你会想要像Daniel一样的JavaScript回退.

检查placeholderJavaScript中的支持是微不足道的.

Answer 2

你可能想从这开始:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

您可能应该调整上面的内容,以便以不会重复三次提示字符串的方式使用JavaScript函数,但我希望这可以让您朝着正确的方向前进.

我还注意到vark.com上的"立即加入"表单也将光标位置设置为文本框的开头,而不是将其留在最后.这可能有点难以使其跨浏览器工作,但您可能想要检查Josh Stodola在以下文章中提出的解决方案:

• 使用Javascript在文本框或TextArea中设置光标位置