表单的基础知识

表单属性

常用的有Action，method，reset，submit等

acceptCharset ：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
? action ：接受请求的 URL；等价于 HTML 中的 action 特性。
? elements ：表单中所有控件的集合（ HTMLCollection ） 。
? enctype ：请求的编码类型；等价于 HTML 中的 enctype 特性。
? length ：表单中控件的数量。
? method ：要发送的 HTTP 请求类型，通常是 “get” 或 “post” ；等价于 HTML 的 method 特性。
? name ：表单的名称；等价于 HTML 的 name 特性。
? reset() ：将所有表单域重置为默认值。
? submit() ：提交表单。
? target ：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性

获取表单对象

var form = document.getElementById("form1");
var forms = document.forms;
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

提交表单

1. 使用input标签定义提交按钮
2. 使用button标签定义提交按钮

<!-- type=submit -->
<input type="submit" value="Submit Form">
<!-- type=image -->
<input type="image" src="graph.png">

<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

防止表单重复提交

给表单添加 submit事件处理程序
在点击事件的处理程序中 阻止点击事件

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
    // 先提交表单
    //阻止默认事件；如果提交失败再恢复呗
    EventUtil.preventDefault(event);
});

通过JavaScript代码来提交表单（之前都是通过按钮）

通过代码来提交表单并不会触发表单的submit事件

var form = document.getElementById("myForm");
// 提交表单
form.submit();

重置表单reset

表单重置后所有的输入值都变回默认值
input标签+type属性
button标签+type属性

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

reset事件

可以拦截表单重置
可以通过代码重置

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//阻止表单重置
EventUtil.preventDefault(event);
});

var form = document.getElementById("myForm");
form.reset();

与submit方法不同，reset（）会触发reset事件。

表单字段elements

表单中嵌套的元素可以通过elements属性获取，得到一个元素对象集合，属性也在表单中的顺序相同，常见的字段有：
input 字段
textarea
button
fieldset

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用一个 name （如单选按钮） ，那么就会返回以该 name 命名的一个NodeList 。
例如，以下面的 HTML 代码片段为例。

<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>

通过name名称可以得到这个nodeList集合

var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

表单字段的共有属性

? disabled ：布尔值，表示当前字段是否被禁用。
? form ：指向当前字段所属表单的指针；只读。
? name ：当前字段的名称。
? readOnly ：布尔值，表示当前字段是否只读。
? tabIndex ：表示当前字段的切换（tab）序号。
? type ：当前字段的类型，如 “checkbox” 、 “radio” ，等等。
? value ：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径

通过 javascript 动态修改表单属性

var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";

避免多次提交表单

通过组件取消事件也可以实现preventDefault
禁用表单的按钮字段
disable设置成true 阻止再次提交

//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});

共有的表单字段方法

1. foucus（）获得焦点
2. blur() 移除焦点

EventUtil.addHandler(window, "load", function(event){
 document.forms[0].elements[0].focus();
});

注意： 如果目标元素设置了hide属性，呢么程序会报错

EventUtil.addHandler(window, "load", function(event){
document.forms[0].elements[0].blur();
});

共有表单字段事件

1. focus 获得焦点时触发
2. blur 失去焦点时触发
3. change 文本域，下拉控件内容改变时触发

注意：调用了 blur() 或 focus() 方法时是可以触发对应的事件的。

这里遇到的只有调用submit方法不会触发相应事件

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

EventUtil.addHandler(textbox, "focus", function(event){

var target = EventUtil.getTarge(event);

if (target.style.backgroundColor != "red"){
  target.style.backgroundColor = "yellow";
}});

EventUtil.addHandler(textbox, "blur", function(event){
var target = EventUtil.getTarge(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});

EventUtil.addHandler(textbox, "change", function(event){
var target = EventUtil.getTarge(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});

文本框脚本

input 单行文本输入

textarea 多行文本输入

//指定文字个数，最大长度，初始值
<input type="text" size="25" value="initvalue" maxlength="50" name="textbox1" />
//指定初始的行列
<textarea rows="10" cols="15" name="textbox2">init value</textarea>

选择文本

select（）方法：选择中所有文本
select事件：选中文本时

    //获得焦点时选中
    EventUtil.addHandler(tb1, "focus", function(event){
        var target = EventUtil.getTarge(event);
        target.select();
    });

监听选中事件，选中文本时弹出它的值

    EventUtil.addHandler(tb1, "select", function(event){
        alert(tb1.value);
    });

取得选择的文本

通过获得选中文本的起始位置去截取文本内容

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

操作剪切板

clipboardData对象
setData（text）设置剪切板数据
getData（）获取剪切板数据

//省略的代码
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
},
//省略的代码
setClipboardText: function(event, value){
if (event.clipboardData){
    return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
    return window.clipboardData.setData("text", value);
    }
}

选择框脚本select和option

select的相关属性

? add(newOption, relOption) ：向控件中插入新 option 元素，其位置在相关项（ relOption ）之前。
? multiple ：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
? options ：控件中所有 option 元素的 HTMLCollection 。
? remove(index) ：移除给定位置的选项。
? selectedIndex ：基于 0 的选中项的索引，如果没有选中项，则值为-1 。对于支持多选的控件，只保存选中项中第一项的索引。
? size ：选择框中可见的行数；等价于 HTML 中的 size 特性。

选择框的 type 属性不是 “select-one” ，就是 “select-multiple” ，这取决于 HTML 代码中有没有 multiple 特性。

选择框的 value 属性由当前选中项决定，相应规则如下。

<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>

option标签选中后value是对应标签指定的，显示在页面上的标签体中的内容

option的属性

? index ：当前选项在 options 集合中的索引。
? label ：当前选项的标签；等价于 HTML 中的 label 特性。
? selected ：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
? text ：选项的文本。
? value ：选项的值（等价于 HTML 中的 value 特性） 。

var selectbox = document.forms[0]. elements["location"];
// 推荐
var text = selectbox.options[0].text; // 选项的文本
var value = selectbox.options[0].value; //

添加选项

获得option对象就可以获得选中项了

var selectedOption = selectbox.options[selectbox.selectedIndex];

添加选项1

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

添加方式二

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题

方式三 最佳

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //第二个参数必须传
该选项被添加到了末尾，当然还可以指定其他位置

移除选项

只清除一项的三种方式：

selectbox.removeChild(selectbox.options[0]); //移除第一个选项

selectbox.remove(0); //移除第一个选项

selectbox.options[0] = null; //移除第一个选项

清除所有项：

function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
    //每次移除一项下一项会自动上移
    selectbox.remove(0);
}
}

移动项：

关键：insertBefore
移动和移除有一个共通的地方：每操作一次都会重置索引

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);

表单序列化

所谓的表单序列化是指：将表单中的参数拼接成一个请求地址

// 接收一个表单对象
function serialize(form) {
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;

    for (i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i];
        switch (field.type) {
            case "select-one":
            case "select-multiple":
                if (field.name.length) {
                    for (j = 0, optLen = field.options.length; j < optLen; j++) {
                        option = field.options[j];
                        if (option.selected) {
                            optValue = "";
                            if (option.hasAttribute) {
                                optValue = (option.hasAttribute("value") ?option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ?option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined: //字段集
            case "file": //文件输入
            case "submit": //提交按钮
            case "reset": //重置按钮
            case "button": //自定义按钮
                break;
            case "radio": //单选按钮
            case "checkbox": //复选框
                if (!field.checked) {
                    break;
                }
                /* 执行默认操作 */
            default:
                //不包含没有名字的表单字段
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" +
                        encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}