我记得在某个地方看到过一个教程,该教程讨论了如何以一种更“可用”的方式设置输入表单的样式。

本质上,您有一个占位符值,当您输入输入时,它会隐藏提示。

现在,请澄清一下:我不希望提示(占位符值文本)消失在焦点上,而是在我第一次开始键入内容时变得更轻松。很好的例子:

  • checkout Aardvark上的表格。这正是我希望输入表单的方式。
  • 我们自己的堆栈溢出-当您尝试提出问题时,在任何输入表单中单击时,它不会立即隐藏文本。您会看到光标以及提示。但是当您开始输入时,它会隐藏提示。 (与上面的Aardvark示例一样,我宁愿让它的阴影变浅而不是将它们全部隐藏在一起。)

  • 我记得很清楚地阅读过interwebz上某个具有此确切要求的教程,但是该死,我忘了给它加上书签。

    有什么建议/链接吗?

    [更新:我最近发现了一个jQuery插件In-Field Labels,它确实可以满足我的需求。另外,here's the link对同一个插件进行了改进。 ]

    最佳答案

    您可能要从这里开始:

    <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在以下文章中提出的解决方案:
  • Setting Cursor Position in a Textbox or TextArea with Javascript
  • 10-05 20:37
    查看更多