9.1.4　表单事件

正如本书第5章所介绍，事件允许我们通过响应各种不同的访问者动作来为页面添加交互。表单和表单元素可以对很多不同的事件做出反应，因此，可以借助广泛的事件来使得表单智能地响应访问者的动作。

Submit

无论何时，当输入一个文本字段后访问者通过单击一个提交按钮或者按下回车键来提交表单的时候，submit事件就触发了。我们可以借助这个事件在表单提交的时候运行脚本。通过这种方式，JavaScript可以验证表单字段，以确保它们都正确填充。当提交表单的时候，一个JavaScript程序会检查字段，如果有问题，JavaScript会停止表单提交并且让访问者知道出现了什么错误；如果没有问题，表单会正常提交。

为了在表单提交事件触发的时候运行一个函数，首选选择表单，然后使用jQuery的submit（）函数添加脚本。例如，假设想要确保在图9-1所示的表单提交的时候，其上的name字段有内容，换句话说，访问者不能让这个字段为空。可以通过为表单添加一个submit事件并在表单提交之前检查该字段的值来做到这一点。如果该字段为空，我们想要让访问者知道并且停止提交过程；否则将允许表单继续提交。如果查看9.1节开始处给出的该表单的HTML，可以看到该表单有一个ID为signup，并且name字段有一个ID为username。因此，可以使用jQuery像下面这样来验证这个表单：

1$（document）.ready（function（）{

2$（'#signup'）.submit（function（）{

3 if（$（'#username'）.val（）==’'）{

4 alert（'Please supply a name in the Name field.'）；

5 return false；

6}

7}）；//end submit（）

8}）；//end ready（）

第1行代码设置了必需的$（document）.ready（）函数，以使得代码在页面的HTML已经载入之后才运行（参见本书5.4.1节的介绍）。第2行代码给表单的submit事件添加了一个函数（如果需要回顾如何使用事件的知识，参见5.1节）。第3行到第6行代码是验证例程。第6行代码检查字段的值是否为一个空字符串（''），即该字段是否为空。如果该字段中没有内容，就会显示一个警告框，让访问者知道出错了。第5行代码非常重要：它防止表单被提交。如果忽略了这个步骤，那么，表单无论如何都会提交，即便没有访问者的名字。第6行代码完成了条件语句，第7行代码结束了submit（）函数。

提示：也可通过使用事件对象的preventDefault（）函数来阻止表单提交，参见5.4.4节的介绍。

submit事件仅适用于表单，因此，必须选择一个表单并给其添加一个submit事件函数。可以使用HTML的＜form＞标签中所提供的一个ID名来选择表单，或者，如果页面上只有一个表单，可以使用一个简单的元素选择器，例如：

$（'form'）.submit（function（）{

//code to run when form is submitted

}）；

Focus

无论何时，当某人单击表单上的一个文本字段或者跳转到一个文本字段，该字段就会接收到所谓的焦点。focus是浏览器触发的一个事件，它表示访问者的光标在一个特定字段之上或之中，据此我们可以确定访问者的注意力集中在哪里。我们可能不会经常使用这个事件，但是一些设计者使用它来擦除一个字段中已经显示的任何文本。例如，假设在一个表单中有如下的HTML：

＜input name="username"type="text"id="username"?

value="Please type your user name"＞

这段代码在表单上创建了一个文本字段，其中带有文本“Please type your user name”。这一技术使得我们能够为访问者提供说明，告诉他应该在该字段填写什么内容。当访问者把焦点放到这个字段，可以擦除文本内容，而不是迫使访问者自己动手通过填充表单来擦除内容，代码如下所示：

1$（'#username'）.focus（function（）{

2 var field=$（this）；

3 if（field.val（）==field.attr（'defaultValue'））{

4 field.val（''）；

5}

6}）；

第1行选择了字段（ID为username）并且把一个函数分配给focus事件。第2行创建一个变量field，然后把对jQuery选择的一个引用存储到其中；正如4.10.2节所讨论的，$（this）引用了一个jQuery函数中当前选择的元素，在这个例子中，就是表单字段。

第4行真正擦除字段。它把字段的值设置为一个空字符串（以两个单引号表示），因此，从字段中删除了任何内容。但是，我们不希望每次该字段获得焦点的时候都擦除这个字段。例如，假设某人来到表单并单击表单字段，第一次擦除了“Please type your user name”文本。然而，如果访问者随后在该字段中输入了自己的名字，单击这个字段之外的内容，然后，又单击回到这个字段，我们不希望他的名字突然消失。这就是第3行的条件语句的作用。

文本字段有一个名为defaultValue的属性，表示当页面初次载入的时候字段中的文本。即便擦除了文本，Web浏览器仍然记得当页面载入的时候字段中的内容是什么。这个条件语句检查字段中当前的内容（field.val（））和字段中最初的内容（field.attr（'defaultValue'））是否相同。如果相同，那么JavaScript解释器就会擦除字段中的文本。

这里用一个例子来说明整个过程。当前面所述页面的HTML初次载入的时候，文本字段中的值为“Please type your user name.”。这是字段的defaultValue。因此，当访问者初次单击字段的时候，条件语句询问“字段中当前的内容和页面初次载入时候的字段中的内容是否相同”。换句话说，“Please type your user name”还是“Please type your user name”吗？答案是肯定的，因此，字段被擦除。

然而，假设输入helloKitty作为用户名，然后跳转到另外一个字段，然后，意识到用户名输入错误。当我们单击回到字段来修改这个错误的时候，focus事件再次触发，分配给该事件的函数再次运行。这次的问题是，“Is'helloKitty'等于'Please type your username.’吗？”答案是否，因此，字段没有擦除，并且我们可以修改自己的输入错误。

Blur

当我们跳转出一个字段或者单击当前字段之外的时候，浏览器触发一个blur事件。这个事件通常和文本字段或文本区域字段一起使用，在某人单击或跳转到一个字段之外的时候，运行一个验证脚本。例如，假设有一个带有很多问题的长长的表单，其中的很多问题需要特定类型的值（例如，E-mail地址、数值、邮政编码等）。假设访问者没有正确地填充这些字段中的任意一个，但是他单击了提交按钮，他将会面对一个长长的错误列表，指出他是怎样填错了这个表单。也可以在他填写表单的同时检查字段，而不是一次把所有的错误告诉他。通过这种方式，如果他在填写过程中犯了错误，会立即注意到并且马上修改错误。

假设有一个字段用来收集访问者想要的产品的数量。HTML可能如下所示：

＜input name="quantity"type="text"id="quantity"＞

我们希望确保该字段只包含数值（例如，1、2或9，而不是One、Two或Nine）。可以在访问者单击这个字段之外后检查，如下所示：

1$（'#quantity'）.blur（function（）{

2 var fieldValue=$（this）.val（）；

3 if（isNaN（fieldValue））{

4 alert（'Please supply a number'）；

5}

6}）；

第1行给blur事件指定了一个函数。第2行获取了字段中的值并且将其存储到一个名为fieldValue的变量中。第3行使用isNaN（）方法（参见本书14.3.2节）检查以确保这个值是一个数字。如果它不是数值，那么第4行运行并显示一个警告框。

Click

当单击任何表单元素的时候，触发click事件。这个事件对于单选按钮和复选框特别有用，因为我们可以根据访问者选择的按钮来添加改变表单的函数。例如，假设有一个订单表单，分别为账单信息和配送信息提供了字段。要使得配送信息和账单信息相同的访问者不必将自己的信息输入两次，我们可以提供一个“Same as billing information”的复选框，那么，当这个复选框选中的时候，隐藏配送信息字段并且使得表单更为简单而方便阅读（参见9.3.3节的实际例子）。

和其他事件一样，可以使用jQuery的click（）函数来为表单字段的click事件指定一个函数：

$（'：radio'）.click（function（）{

//function will apply to every radio button when clicked

}）；

注意：click事件也适用于文本字段，但是它不同于focus字段。无论何时，当你单击或跳到一个文本字段中的时候，focus就会触发，而只有在单击到字段中的时候，click事件才会触发。

Change

change事件适用于表单菜单（例如，图9-1所示的“Planet of Birth”菜单）。当我们从一个菜单做出选择的时候，change事件触发。可以使用这个事件来运行一个验证函数，例如，很多设计者通常在菜单中添加一条说明作为第一个选项，例如，“Please choose a country.”。为了确保访问者没有选择一个国家然后突然把菜单改变回第一个选项（“Please choose a country”），我们可以在每次某人从菜单做出新的选择的时候检查菜单的选择值。

或者，可以对表单编程，让它根据菜单选择来做出变化。例如，可以运行一个函数，无论何时，当从菜单选择一个选项时，另一个菜单的可用选项发生相应的变化。例如，图9-3展示了带有两个菜单的一个表单，从上面的菜单中选择一个选项，将会改变下面的菜单中可用颜色的列表。

要对一个菜单应用change事件，可以使用jQuery的change（）函数。例如，假设有一个菜单列出了国家的名字，而该菜单有一个ID为country，并且每次有一个新的选择的时候，我们想要确保新选择不是说明文本“Please choose a country.”，可以像下面这样做：

$（'#country'）.change（function（）{

if（$（this）.val（）=='Please choose a country'）{

alert（'Please select a country from this menu.'）；

}

}

图　9-3　当用户从菜单选择一个选项的时候，表单菜单的change事件允许我们做一些有趣的事情。在这个例子中，从上面的菜单选择一个选项会动态地改变第二个菜单中给出的选项。从上面的菜单中选择一种产品，并且第二个菜单显示该产品可用的颜色