表单基础知识

在JavaScript中，表单对应的是HTMLFormElement 类型，它继承了HTMLElement 。

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特性。

document.forms 可以获取页面中的所有表单，返回一个集合，在这个集合中可以通过数值索引或者name值来获取特定的表单。

1 2	var firstForm = document.forms[0]; //取得页面中的第一个表单 var myForm = document.forms["form2"]; //取得页面中为"form2"的表单

1、提交表单

用户点击按钮或者图像时

   
<input type="submit" value="Submit Form">

<button type="submit">Submit Form</button>

<input type="image" src="graphic.gif">  //图像也可以作为提交按钮

在JavaScript中，可以用submit() 方法也可以提交表单。注意：在调用submit() 方法提交表单的时候，不会触发submit 事件。

1
2
3

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

阻止提交按钮：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){

	event = EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
});

2、重置表单

重置按钮：


<input type="reset" value="Reset Form">

<button type="reset">Reset Form</button>

在JavaScript中，可以用 reset() 方法也可以重置表单。注意：在调用 reset() 方法提交表单的时候，会一样触发 reset 事件。

1
2
3

var form = document.getElementById("myForm");
// 重置表单
form.reset();

阻止重置按钮：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){

	event = EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
});

3、表单字段

每个表单都有一个element 属，它是表单中所有表单元素的集合。是一个有序列表。

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

1、共有的表单字段属性

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

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";

防止多次点击提交按钮

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

除了<fieldset>之外，所有表单都有 type 属性。但是<input>和<button>元素的 type 属性是可以动态修改的，而<select>元素的 type 属性则是只读的。
在这里插入图片描述

2、focus() 和 blur()

focus() 方法用于将浏览器的焦点设置到表单字段上。
blur() 方法把焦点移走。

HTML5中新增一个 autofocus 属性。自动吧焦点设置到相应的字段。

1	<input type="text" autofocus>

3、共有的字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件。

blur:当前字段失去焦点时触发。
change:对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发;对于<select>元素，在其选项改变时触发。
focus:当前字段获得焦点时触发。

文本框脚本

<input> 单行文本框

size特性：指定文本框中能够显示的字符数。
value特性：设置文本框的初值。
maxlength 特性：指定文本框可以接受的最大字符数。

1	<input type="text" size="25" maxlength="50" value="aqingya">

<textarea> 多行文本框

rows：指定文本框中的字符行数
cols：指定文本框中的字符列数

1、选择文本

select() 方法：用于选择文本框中的所有文本。<inpout>和<textarea>都支持。

EventUtil.addHandler(textbox, "focus", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});

1、选择（select）事件

选择文本框中的文本就会触发该事件。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
var alert("Text selected" + textbox.value);
});

2、取得选择的文本

通过select 事件我们知道用户什么时候选择了文本，但是不知道选择了什么样的文本。
两个属性：selectionStart 和selectionEnd 表示选择文本的范围（文本的开头和结尾）

兼容IE8及更早的版本中有一个document. selection对象。

function getSelectedText(textbox) {
    if (typeof textbox.selectionStart == "number") {
        return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
}

3、选择部分文本

setSelectionRange() 方法，这个方法接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引(类似于substring()方法的两个参数)。

textbox.value = "Hello world!"
//选择所有字符
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第4到第6个字符
textbox.setSelectionRange(4, 7); //"o w"

兼容IE8
createTextRange() 方法

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length); //"Hello world!"
range.select();
//选择前 3 个字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//选择第4到第6个字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"

跨浏览器方法

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

textbox.value = "Hello world!"
//选择所有字符
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
selectText(textbox, 0, 3); //"Hel"
//选择第4到第6个字符
selectText(textbox, 4, 7); //"o w"

2、过滤输入

1、屏蔽字符

响应文本输入框中插入字符操作的是keypress 事件。

EventUtil.addHandler(textbox, "keypress", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
        !event.ctrlKey) {
        //屏蔽不符合的按键
        EventUtil.preventDefault(event);
    }
});

2、操作剪切板

剪切板事件

beforecopy:在发生复制操作前触发。
copy :在发生复制操作时触发。
beforecut:在发生剪切操作前触发。
cut :在发生剪切操作时触发。
be forepaste:在发生粘贴操作前触发。
paste:在发生粘贴操作时触发。

向EventUtil中添加方法

//获取粘贴板内容
getClipboardText: function(event) {
    // 兼容浏览器 ，在IE中clipboardData是window对象。
    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);
    }
},

在需要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。例如，如果一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在paste事件中，可以确定剪贴板中的值是否有效，如果无效，就可以像下面示例中那样，取消默认的行为。

EventUtil.addHandler(textbox, "paste", function (event) {
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)) {
        EventUtil.preventDefault(event);
    }
});

到目前EventUtil 如下：

var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },

            // 解决浏览器兼容性问题
            getEvent: function(event) {
                return event ? event : window.event;
            },

            // 返回事件目标
            getTarget: function(event) {
                return event.target || event.srcElement;
            },

            //取消事件的默认行为。
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },

            // 移除事件处理程序
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },

            //提供相关元素的信息，relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
            getRelatedTarget: function(event) {
                if (event.relatedTarget) {
                    return event.relatedTarget;
                } else if (event.toElement) {
                    return event.toElement;
                } else if (event.fromElement) {
                    return event.fromElement;
                } else {
                    return null;
                }
            },

            //获取鼠标按钮
            /**
             *  0: 表示没有按下按钮。
                1: 表示按下了主鼠标按钮。
                2: 表示按下了次鼠标按钮。
                3: 表示同时按下了主、次鼠标按钮
                4: 表示按下了中间的鼠标按钮。
                5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
                6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
                7: 表示同时按下了三个鼠标按钮。*/
            getButton: function(event) {
                if (document.implementation.hasFeature("MouseEvents", "2.0")) {
                    return event.button;
                } else {
                    switch (event.button) {
                        case 0:
                        case 1:
                        case 3:
                        case 5:
                        case 7:
                            return 0;
                        case 2:
                        case 6:
                            return 2;
                        case 4:
                            return 1;
                    }
                }
            },

            //获得鼠标滚轮的增量值delta
            getWheelDelta: function(event) {
                if (event.wheelDelta) {
                    return (client.engine.opera && client.engine.opera < 9.5 ?
                        -event.wheelDelta : event.wheelDelta);
                } else {
                    return -event.detail * 40;
                }
            },


            //获取字符串编码  主要用于文本框 监听事件是keypress
            getCharCode: function(event) {
                if (typeof event.charCode == "number") {
                    return event.charCode;
                } else {
                    return event.keyCode;
                }
            },

            //获取粘贴板内容
            getClipboardText: function(event) {
                // 兼容浏览器 ，在IE中clipboardData是window对象。
                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);
                }
            },

            //取消进一步的事件捕获或者冒泡
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };

4、HTML5 约束验证API

1、必填字段

required 属性：带有required 属性的字段必须填。

1	<input type="text" name="username" required>

2、其他输入类型

1 2	<input type="email" name ="email"> <input type="url" name="homepage">

3、数值范围

比如想让用户只能输入 0 到 100 的值，而且还是5的倍数。·

1	<input type="number" min="0" max="100" step="5" name="count">

4、输入模式

pattern 属性：这个属性的值的一个正则表达式。用于匹配文本框中的值。

1	<input type="text" pattern="\d+" name="count">

5、检测有效性

checkValidity() 方法可以检查表单中的某个字段是否有效。所有的表单字段都有这个方法。

话句话说：必填字段中如果没有值就是无效的，而字段中的值与pattern属性不匹配也是无效的。

if (document.forms[0].elements[0].checkValidity()){
	//字符有效，继续
} else {
	//字符无效
}

要检测整个表单是否有效，可以在表单自身调用checkValidity()方法。如果所有表单字段都有效，这个方法返回true;即使有一一个字段无效，这个方法也会返回false。

if(document.forms[0].checkValidity()){
	//表单有效，继续
} else {
	//表单无效
}

6、禁用验证

novalidate 属性：设置它，表单就不需要进行验证。

1
2
3

<form method="post" action=" " novalidate>

</form>

formnovalidate 属性：某一个按钮不需要验证。

1	<input type="submit" name="阿清" value="aqing" formnovalidate>

选择框脚本

选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。

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属性由当前选中项决定，相应规则如下。

如果没有选中的项，则选择框的value属性保存空字符串。
如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的value特性在HTML中未指定，则选择框的value属性等于该项的文本。
如果有多个选中项，则选择框的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>

如果用户选择了其中第一项，则选择框的值就是” Sunnyvale, CA”。如果文本为”China “的选项被选中，则选择框的值就是-一个空字符串，因为其value特性是空的。如果选择了最后一项，那么由于<option>中没有指定value特性，则选择框的值就是” Australia”。

在DOM中，每个<option>元素都有一个HTMLOptionElement 对象表示。为便于访问数据，HTMLOptionElement对象添加了下列属性:（这些属性的目的都是为了方便选项的访问）

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; //选项的值

1、添加选项

有两种方法
1、使用DOM方法

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

2、添加新选项的方式是使用选择框的add()方法。DOM规定这个方法接受两个参数:要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项，应该将第二个参数设置为null。在IE中第二个参数设置为undefined。

1 2	var newOption = new Option("Option text", "Option value"); selectbox.add(newOption, undefined); //最佳方案

推荐使用第二种

2、移除选项

1、使用DOM方法中的removeChild() 方法

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

2、使用选项框中的remove() 方法
一个参数：移除选项的索引

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

3、就是将相应选项设置为null。

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

3、移动和重排选项

移动：使用DOM中的appendChild() 方法

1
2
3

var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

移动选项与移除选项有一个共同之处，即会重置每-一个选项的index属性。

重排：使用DOM方法 insertBefore() 方法。