样式表单时填充文本

Question

关于我正在造型的登录表单，我有两个问题。我正在使用onfocus从用户输入电子邮件的框中自动删除“电子邮件”的文本，密码框也是如此。

1. 如何将此文本设为不同颜色（即灰色），然后将实际输入颜色设为黑色？
2. 这对于所有明星的密码字段有何用处？

我想要实现的一个很好的例子是推特登陆页面（减去更复杂的褪色效果）。

非常感谢。

Answer 1

万一你不知道......

没有javascript就可以。 HTML5为我们提供了placeholder属性，它完全符合您的要求。

示例：

<input type="text" placeholder="Your Name" />
<input type="password" placeholder="Your Password" />

演示：http://jsfiddle.net/rxfyj/

浏览器支持有限，但我认为未来 - 这是实现此功能的最佳方式，同时在绝对必要的情况下提供javascript后备。那里有很多占位符插件，但我遇到的几乎所有插件have issues。

更多信息：http://diveintohtml5.ep.io/detect.html#input-placeholder

Answer 2

密码字段与文本字段相同，您需要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类，以便使用新颜色。

修改的

Woops，我错误地写了函数名，现在应该可以工作了。这是一个jsfiddle示例：

http://jsfiddle.net/E32bM/