JavaScript总结（七）

JavaScript表单编程

表单是Web上与用户进行交互的主要界面。则我们需要掌握如何访问用户输入的表单数据，校验用户输入的正确性显得至关重要。

♞ 对Form元素进行脚本编写

✍ 获取表单的应用

➣ 使用DOM树中定位一个元素的方法——getElementById()方法，并将表单的ID作为方法的参数；

var objForm = document.getElementById("form");

➣ 使用文档的表单集合，并且通过表单在forms集合中的位置或者通过其name属性；

var objForm = document.forms[0]; //不用下标就是获得表单集合
var objForm = document.forms["name"];//得到名为name的表单

✍ 获取表单的字段

每个表单字段都包含在表单的elements集合中，我们可以通过使用表单元素的name属性或者它在集合的位置，访问集合中的不同字段；

➣ 通过它在集合的位置访问集合中字段；

var temp=oform.elements[0]; //得到表单第一个字段。

➣ 使用表单元素的name属性访问集合中字段；

对该方法传入name属性的字符串；

var temp=oform.elements["text"]; //得到名为text1的字段。

每个表单字段称为表单本事的一个属性，可以直接通过其名称访；

var temp=oform.textbox1; //得到名为textbox1的字段。

如果名称中间有空格，可以用中括号代替；

var temp=oform["text box 1"]; //得到名为text box 1的字段。

✍ 表单字段元素对象

➣ form表单字段元素对象的方法

方法	描述
blur()	让表单字段元素失去焦点，当前焦点移到后台
focus()	让表单字段元素获得焦点
click()	模仿用户鼠标单击该元素的过程
setCapture()	在某个表单字段元素对象上捕获当前网页文档上的鼠标事件
releaseCapture()	取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置
add()	为列表框（select）增加一个选择项(option)

➣ form表单字段元素对象的属性

属性	描述
defaultValue	设置或返回表单字段元素的默认值（初始值）
disabled	设置或返回文本输入框的disabled状态；该属性用于指示一个表单控件是否可用，一个disable控件不允许用户输入
form	返回表单字段元素所属于form表单对象
readOnly	设置或返回文本输入框的readonly状态
title	设置或返回表单字段元素title属性
value	设置或返回表单字段元素的当前取值
checked	设置或返回单选按钮、复选按钮的选中状态

➣ form表单字段元素对象的事件

事件	描述
onChange	当焦点离开文本输入框且文本输入框中的值改变时，或者改变列表框的选择结果后，产生该事件
onSelect	当单行或多行文本输入框中的文字被选择加亮后，产生该事件
onFocus	当表单字段获得焦点时，产生该事件
onBlur	当表单字段元素失去焦点时，产生该事件

✍ 表单的提交和重置

➣ 使用一个提交按钮或者模拟提交按钮的图形来提交/重置表单

<input type="submit" value="Submit"/>　　　　 //submit按钮提交表单
<input type="image" value="submit.gif"/>　　 //image按钮提交表单
<button type="submit">Submit</button>　　　  //submit按钮提交表单
<input type="reset" value="Reset"/>　　　　　//reset按钮重置表单
<button type="reset">Reset</button>　　　 　 //reset按钮重置表单 

➣ 使用submit()方法或者reset()方法提交/重置表单

得到表单引用后，直接调用submit()方法或者reset()方法

oForm.submit(); //oForm表单提交
oForm.reset(); //oForm表单重置

♞ 对文本框元素进行脚本编写

✍ 获取/更改文本框的值

对于标签<input/>和<textarea/>都支持同样的属性value，以获取文本框中的文本；使用value属性返回String类型的文本内容；

✍ 选择文本

两种类型的文本框都支持select()方法，该方法用于选择文本框中的所有文本。为使该方法起作用，文本框必须获得焦点。为确保文本框获得焦点，我们必须在调用select()方法之前，调用另外一个方法focus();

✍ 文本框事件

两种文本框都支持blur、focus、change和select事件。

➣ change事件——在用户改变文本框的值之后，当文本框失去焦点时触发该事件。

（PS：通过设置value属性改变文本框的值时，不触发该事件）

➣ select事件——在一个或者多个字符被选中时触发事件；不管是手动选中还是使用select()方法。

➣ blur事件——当文本框失去焦点时触发事件；

（PS：blur事件和change事件都是在文本框失去焦点后触发，但是change事件是在文本框的值被改变的情况下才会触发，如果没有改变时只触发blur事件；改变时则先触发change事件，随后再执行blur事件）；

➣ focus事件——当文本框获得焦点时触发事件；

♞ 对列表框和组合框进行脚本编写

✍ 访问选项

HTML DOM将select元素中的每一项定义到一个options集合中，该集合中列出select控件中的所有option元素。

属性	描述
id	设置或返回选项的 id。
index	返回下拉列表中某个选项的索引位置。
label	设置或返回选项的标记 （仅用于选项组）。
selected	设置或返回 selected 属性的值。
text	设置或返回某个选项的纯文本值。
value	设置或返回被送往服务器的值。

✍ 添加选项

很多时候，列表框或者组合的选项数据，是来自于后台数据服务器或者其它数据文件，那么我们就不能在XHTML中指定选项，必须使用JavaScript编码动态地将数据项添加到select元素中，按照以下步骤将选项动态添加到select元素中：

Ⅰ 定义一个带三个参数的方法，这三个参数分别是要添加选项的列表值、要添加的选项的名称以及要添加的选项的值；

Ⅱ 使用DOM方法创建一个option元素，然后创建一个文本节点分配给选项的名称；

Ⅲ 设置option元素的value属性；

Ⅳ 通过appendChild()方法，将新选项添加到select元素中;

ListUtil.add = function(oList, sName, sValue){
  var option = document.creatElement("option");
  option.appendChild(document.creatTextNode(sName));
  if(arguments.length == 3){
  option.setAttribute("value",sValue);
  }
  oList.appendChild(potion);
}

✍ 删除选项

删除选项的方法有两种，一种是使用DOM提供的功能，一种是使用HTML DOM提供的功能

➣ BOM：使用options集合，将要移除的选项设置为null；

oList.options[0] = null;

➣ HTML DOM:使用select元素的remove()方法，将要删除的选项的索引传递给remove()方法；

oList.remove(0);

✍ 移动选项

使用DOM的appendChild()方法，可以从第一个列表框中把元素移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild()方法，该元素就会从它的父元素中移除，并且放在指定位置。

♞ 对复选框和单选框进行脚本编写

属性/方法	描述
checked	布尔值，指示控件状态
defaultChecked	布尔值，指示页面加载时控件是否被选中
click()	模仿按钮点击，改变控件状态，对应的事件onclick