【发布时间】：2011-09-30 00:09:41
【问题描述】：
关于我正在设计的登录表单，我有两个问题。我正在使用onfocus 自动从用户输入电子邮件的框中删除“电子邮件”的文本，密码框也是如此。
- 如何将此文本设置为不同的颜色（即灰色），然后将实际输入颜色设置为黑色？
- 这对于全星的密码字段有何作用？
我想要实现的一个很好的例子是 twitter 登陆页面（减去更复杂的淡入淡出效果）。
非常感谢。
【问题讨论】：
标签： javascript html css forms
【发布时间】：2011-09-30 00:09:41
【问题描述】：
以防万一你不知道......
这在没有 javascript 的情况下是可能的。 HTML5 为我们提供了 placeholder 属性，它完全符合您的要求。
例子：
<input type="text" placeholder="Your Name" />
<input type="password" placeholder="Your Password" />
浏览器支持是有限的，但我认为这是实现此功能的最佳方式，同时在绝对必要时提供 javascript 后备。有很多占位符插件，但我几乎都遇到过have issues。
更多信息：http://diveintohtml5.ep.io/detect.html#input-placeholder
【讨论】：
-
谢谢，这太简单了！我将如何检查浏览器是否支持它，以便我可以相应地实现 jQuery？
-
查看链接，你会在那里找到答案。
密码字段与文本字段相同，您需要jQuery，这是一个javascript库。
我可以鼓励您使用由 Google 托管的 jQuery，它可以节省您的带宽，并且由于其庞大的服务器数量，它会为您的用户提供更快的速度。只需将其添加到您的 HTML 中：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
然后，确保输入字段的默认样式为灰色，并为黑色添加另一个类。
input {
color: #aaa;
}
input.filled {
color: #000;
}
然后使用这个jQuery：
$('input').keyup(function(event){
if(event.keyCode != 9) /* exclude the tab key */
$(this).addClass('filled');
});
您基本上创建了一个绑定到输入字段的事件处理程序，当用户释放一个键时，它将添加 filled 类以便使用新颜色。
编辑
糟糕，我写错了函数名，现在应该可以使用了。这是一个 jsfiddle 示例：
【讨论】：