打造“帮手”表单中的文本颜色与键入的文本颜色不同
<input name="phone" type="text" id="phone" value="Phone #" onfocus="value=''">
我这里有两个问题。主要的一个是我希望帮助文本（在本例中为“电话号码”）的颜色与用户输入的文本的颜色不同，以便用户更容易区分已填充和未填充的字段。
第二个是，使用这种方法（onfocus="value''"），如果您在字段中输错了某些内容并返回，则必须重新输入整个内容，这是不可接受的。
<input name="phone" type="text" id="phone" value="Phone #" onfocus="value=''">
I've got two problems here. The main one is I would like the helper text (in this case "Phone Number") to be a different color then the inputted text from the user, to make it easier for the user to differentiate between filled and unfilled fields.
The second is that with this methodology (onfocus="value''") if you mistype something in a field and come back to it you have to retype the whole thing which isn't really acceptable.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
有一个很棒、简单的 jQuery 插件，它可以完全满足您的需求：
http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/
使用CSS实现了你想要的效果。
这里还有另一个简单的 jQuery 插件：
http://fuelyourcoding.com/scripts/infield/
一个提供了略有不同的功能，因为水印文本会一直保留到您开始打字为止。
There is a great, simple jQuery plugin that will do exactly what you want here:
http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/
It achieves the effect you want using CSS.
There is another simple jQuery plugin here:
http://fuelyourcoding.com/scripts/infield/
That one offers slightly different functionality in that the watermark text stays until you start typing.
与使用文本字段的值作为辅助文本不同，将标签放置在字段上并在文本字段不为空时隐藏它会更好、更容易访问。
编辑：也有一个 jQuery 插件。
Instead of using the value of the textfield as helper text, it is much nicer and more accessible to position the label over the field and hide it when the textfield is not empty.
edit: there is a jQuery plugin for that, too.
也许帮助文本应该完全在该字段之外？ “电话#”看起来更像是字段标题而不是帮助文本。
如果任何时候都不需要提示，也许根本不需要？如果需要的话，当用户输入内容时会发生什么？不应该有突然消失的 UI 元素或文本。
Maybe the help text should be outside of the field altogether? "Phone #" seems more like a title of the field than a help text.
If the hint is not needed at all times, maybe it's not needed at all? And if it is needed, what happens when user has typed something? One shouldn't have UI elements or texts that vanishes suddenly.