将表单中的“帮助”文本设置为与键入文本不同的颜色答案

【问题标题】：Making "helper" text in a form be a different color then typed text将表单中的“帮助”文本设置为与键入文本不同的颜色
【发布时间】：2010-04-26 18:11:14
【问题描述】：

<input name="phone" type="text" id="phone" value="Phone #" onfocus="value=''">

这里有两个问题。主要的是我希望帮助文本（在本例中为“电话号码”）与用户输入的文本颜色不同，以便用户更容易区分填充和未填充的字段。

第二个问题是，使用这种方法 (onfocus="value''")，如果您在某个字段中输入错误并返回，您必须重新输入整个内容，这是不可接受的。

【问题讨论】：

【解决方案1】：

这里有一个很棒、简单的 jQuery 插件，可以完全满足您的需求：

使用 CSS 实现你想要的效果。

这里还有一个简单的 jQuery 插件：

该版本提供的功能略有不同，水印文本会一直保留到您开始输入。

【讨论】：

【解决方案2】：

与其将文本字段的值用作帮助文本，不如将标签放置在字段上并在文本字段不为空时将其隐藏起来，这样会更好且更易于访问。

编辑：也有一个jQuery plugin。

【讨论】：

【解决方案3】：

也许帮助文本应该完全不在该字段中？ “电话号码”看起来更像是字段的标题，而不是帮助文本。

如果在任何时候都不需要提示，也许根本就不需要？如果需要，当用户输入内容时会发生什么？不应该有突然消失的 UI 元素或文本。

【讨论】：