JavaScript之表单脚本

1. 基础知识

在HTML中，表单是由<form>元素来表示。可以像一般元素一样通过DOM操作来获得它，同时也可以通过document.forms取得页面中所有的表单。每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。通过下面代码可以获得文档中第一个表单中的第一个表单元素：

var element = document.forms[0].elements[0];

2. 表单字段方法

每个表单字段都有的两个方法：focus()和blur()。

其中focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。例如：

window.onload = function() {
    document.forms[0].elements[0].focus();
}

同时，HTML5为表单字段新增了一个autofocus()属性，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。例如：

<input type="text" autofocus>

blur() 方法与 focus() 方法相反，它的作用是从元素中移走焦点。

对于文本框（<input type="text">和<textarea>）还支持select()方法，这个方法用于选择文本框中的文本，该方法不接受参数。例如以下代码，可以在文本框获得焦点时选择其中的所有文本。

var textbox = document.forms[0].elements[0];
textbox.addEventListener('focus', function(event) {
    var event = event || window.event,
          target = event.target || event.srcElement;
    target.select();
}, false);

3. 表单字段事件

所有的表单事件都支持以下三个事件：

blur：当前字段失去焦点时触发

focus：当前字段获得焦点时触发

change：对于<input>和<textarea>元素，当他们从获得焦点到失去焦点且value值改变时，才会触发；对于<select>元素，只要用户选择了不同的选项，就会触发该事件，也就是说不失去焦点也会触发事件。

与select()方法对应的有一个select事件，在选择了文本框中的文本时，就会触发该事件。HTML5 通过一些扩展方案，添加了两个属性：selectionStart和selectionEnd，可以知道用户选择了什么文本，这两个属性中保存的是基于0的数值，表示文本的范围（即文本选区开头和结尾的偏移量）。以下代码可以取得用户在文本框中选中的文本：

function getSelectedText(textbox) {
    if(typeof textbox.selectionStart == "number") {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
    } else if (document.selection) {  //IE8及更早版本
        return document.selection.createRange().text;
    }
}

4. 选择框

选择框是通过<select>和<option>元素创建的。除了所有表单字段共有的属性和方法外，还具有以下常用的属性和方法：

options：控件中所有<option>元素的HTMLCollection

selectedIndex：基于0的选项中的索引，如果没有选中项，则为-1

选择框的value属性由当前选中项决定，它具有以下规则：

• 如果没有选中项，则选择框的value属性中保存空字符串
• 如德国由一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也遵循该规则
• 如果有一个选中项，但该项的value特性在HTML中为指定，则选择框的value属性等于改性的文本
• 如果有多个选中项，则选择框的value属性将依据前两条规则取得第一个选中项的值

访问选中项的最简单方式，就是使用选中框的selectedIndex属性：

var selectedOption = selectbox.options[selectedIndex];

同时，每个<option>元素具有以下的属性：

index：当前选项在options集合中的索引

selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项

text：选项的文本

value：选项的值