第10章 控制表单－和用户.ppt

第10章 控制表单－和用户的操作交互 上一章介绍了如何使用正则来验证表单输入。正则是一种非常方便而强大的字符串工具，可以用很少的代码实现非常复杂的字符串操作，让很多原本繁杂的操作清晰起来。 表单除了需要验证输入的有效性外，还常常需要根据用户的操作做出相应的动作。譬如在一个注册页面，用户勾选“我愿意接收邮件”复选框，那么就将“请输入邮件地址”输入框显示出来，而如果用户取消对该复选框的勾选，那么就将“请输入邮件地址”输入框隐藏，以达到好的视觉效 使用Javascript和用户进行动态的交互，响应迅速，可以得到很好的用户体验，提升了表单的易用性，让表单更加人性化。下面的例子将说明如何实现和用户的交互。 10.1 示例：随用户操作而变化的表单 代码.htm是一个用户管理页面的一部分，演示如何响应一些常见的用户操作，并通过脚本实现一些人性化的功能。为了便于阅读和理解，已经去除表现样式，只保留了功能代码。 10.2 用户操作会激发的事件 要和用户交互，首先要能够得到用户操作的事件。在第4章中介绍过什么是事件和如何绑定事件，下面将逐一介绍表单中的常见事件。 10.2.1 onchange事件 当表单元素的值发生变化时，会激发onchange事件。本章示例代码中，获取图片的路径使用onchange事件。当用户完成图片选择时，会激发该事件，调用upload_image_preview函数来载入图片进行预览。“你来自”下拉列表框的更改同样会激发onchange事件，调用create_city函数来生成城市列表。代码.htm演示onchange事件会在什么时候激发。 代码.htm onchange事件测试 html head meta http-equiv=content-type content=text/html; charset=GB2312 / title10-2 onchange事件测试/title /head body style=overflow:auto; input onchange=alert(text input is changed.);br input type=checkbox onchange=alert(checkbox is changed.);br input type=radio name=rd onchange=alert(radio 1 is changed.); input type=radio name=rd onchange=alert(radio 2 is changed.);br select onchange=alert(select is changed.);option1/optionoption2/option/selectbr textarea onchange=alert(textarea is changed.);/textarea /body /html 10.2.2 鼠标和键盘事件 鼠标和键盘事件比较容易理解，就是用户在移动鼠标或敲击按键时激发的事件。本章示例代码中，显示隐藏的上传文件部分由鼠标单击事件激发，按下Ctrl和Enter键提交表单由键盘按下事件激发。表是所有鼠标和键盘事件的含义。 10.3 表单的状态变化 在获取事件后，就要根据表单元素所发生的变化，进行相应的操作。下面讲解两种比较常见的操作：改变表单元素的可用状态、显示或隐藏一部分表单。 10.3.1 只读和不可用状态的改变 本章示例的check_status函数中，对“用户名”和“密码”两个文本框的状态操作，就是操作不可用状态（disabled）属性。基本语法如下： html_object.disabled = Boolean_value; disabled属性为真时元素不可用，为假时可用。 文本框还有readonly属性，在为真时，文本框为只读。需要注意的是，disabled和readonly同样是让用户无法修改内容，但是两者的外观表现不同。disabled的表单元素不能再接收事件。举例来说，如下的代码： input disabled ondblclick=”this.disabled=false;” / 试图让文本框被双击后解除不可用状态。可是实际上这在逻辑上行不通，因为disabled的文本框是不会激发双击事件的。这时合理的做法是将文本框的初始属性设为readonly： input readonly ondblclick=”this.readOnly=false;” / 10.3.2 显示和隐藏 本章示例的上传文件部分，通过操作上传部分的容器div的CSS属性display，来显示或隐藏元素。基本语法如下： html_object.style.display = display_val