9.2　为表单添加智能

Web表单对站点访问者提出很多要求：文本字段需要填充、要做出选择、选中复选框等。如果想要人们填充你的表单，应该让表单尽可能简单。幸运的是，JavaScript可以做很多事情，使得Web表单易于使用。例如，可以隐藏表单字段直到需要它们的时候才显示，把不适用的表单字段变为灰度，并且根据表单的选择计算总值。JavaScript提供了无数的方法来提高表单的易用性。

9.2.1　聚焦表单的第一个字段

通常，要开始填充一个表单，必须单击第一个文本字段并开始录入。在带有登录表单的一个页面上，何必让访问者在可以输入之前还要多此一举地把鼠标光标移动到位置并单击登录字段呢？为什么不恰好把光标放在字段中，准备好立即接收他们的登录信息呢？使用JavaScript，很容易做到这点。

秘密在于focus，它不仅仅是可以响应的一个JavaScript事件，而且是可以用来把光标放置到一个文本字段中的命令。我们直接选择文本字段，然后运行jQuery focus（）函数。例如，假设在图9-1所示的页面载入的时候，我们希望光标在name字段中。如果看一下9.1节开始处的表单的HTML，你将会看到该字段的ID是username。因此，JavaScript把焦点（也就是光标）放置到该字段上，如下所示：

$（document）.ready（function（）{

$（'#username'）.focus（）；

}）；

在这个例子中，文本字段的ID是username。然而，可以创建一个通用的脚本，它总是聚焦到表单的第一个文本字段上，而不一定必须给字段分配一个ID：

$（document）.ready（function（）{

$（'：text：frst'）.focus（）；

}）；

正如9.1.1节所介绍的，jQuery提供了一个方便的方法来选择所有的文本字段，即$（'：text'）。此外，通过为任何选取器添加：first，你可以选择该元素的第一个实例，以使得jQuery选择器$（'：text：first'）选择页面上的第一个文本字段。添加.focus（），会随后将光标放置在该文本字段，以便耐心地等待访问者填写该字段。

如果页面上有多个表单（例如，一个“search this site”表单、一个“signup for our newsletter”表单），我们需要修改选择器来指明应该聚焦到哪个表单的文本字段。例如，假设想要光标在一个登录表单的第一个文本字段中闪烁，以准备好供用户输入，而不是在查找表单的第一个文本字段中。要聚焦到登录表单的文本字段，只要给表单添加一个ID（例如，signup），然后就可以使用如下的代码：

$（document）.ready（function（）{

$（'#signup：text：frst'）.focus（）；

}）；

现在，选择器$（'#signup：text'）只是选择登录表单中的文本字段。