JavaScript高级程序设计读书笔记（15）——表单

表单

一、表单的基础知识；
在HTML中表单是由form元素来表示的，而在JavaScript中表单对应的则是HTMLFormElement类型；
通过document.forms可以取得页面中的所有表单，在这个集合中可以通过数值索引和name值来取得特定的表单；
二、提交表单
使用input和button标签（type值为submit）都可以定义提交按钮，以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件，这样我们就有机会验证表单数据，并决定是否允许提交表单。在JavaScript中也可以用编程的方式调用submit（）方法提交表单,使用submit（）方法提交表单不会触发submit事件；

var form=document.getElementById("submit")[0];
form.submit();

提交表单最大的问题就是重复的提交表单数据，如何解决——重置表单。
三、表单重置
将input和button的type设置为reset。在用户单击提交按钮时表单会被重置，触发reset事件。也可以通过JavaScript来控制重置表单

var form=document.getElementById("form")[0];
form.reset();

四、表单字段
每个表单都有一个elements属性，该属性是表单中所有表单元素的集合，它是一个有序列表，与他们出现在html中的顺序是相同的。可以按照位置和name值来访问各个表单字段。

var form=document.getElementById("form")[0];
var innerEle1=form.elements[0];//访问第一个表单字段

1、表单字段共有的属性：
——disabled，布尔值，表示当前表单字段是否被禁用；
——form，指向当前字段所属表单的指针，只读；
——name，当前字段的名称；
——readOnly，布尔值，表示当前字段是只读；
——typeIndex，表示当前字段的序号、
——type，表示当前字段的类型；
——value，当前字段将被提交给服务器的值；
2、表单字段共有的方法；
——focus（），将浏览器的焦点设置到当前字段，使其响应键盘事件；
——blur（），把当前的表单字段的焦点移除；
3、表单字段共有的事件
——blur，失去焦点时触发，
——change，对于input和textarea标签来说，从获得焦点到失去焦点并且value值发生改变时，触发，对于select标签来说，只要选择了不同选项就会触发change事件；change事件经常用于验证用户在字段中输入的数据；
——focus，当前字段获得焦点是触发；

五、文本框脚本
在html中有两种方式实现文本框，input单行文本框，textarea多行文本框；
在input中，size特性可以指定文本框可以接收的最大字符数，value特性，可以设置文本框的初始值，maxlength特性表示最大字符数；
在textarea中，rows表示文本框的字符行数，cols表示文本框的字符列数；

六、选择文本
select（）方法用于选择文本框中的所有文本。
1、选择事件
与select方法对应的还有一个select选择事件，在选择文本框中的文本时，就会触发select事件；不同浏览器对select事件触发的时机表现各不相同。
2、取得选择的文本
selectionStart和selectionEnd，表示所选文本的范围。
要获得用户在文本框内选择的文本可以使用下面的函数(兼容IE的做法)。

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

3、选择部分文本
除了select（）方法选择所有文本外，setSelectionRange（）方法可以选择部分文本，两个参数是要选择的第一个字符索引和最后一个字符之后的索引。要看到选择的文本，必须在使用此方法之前或之后立即将焦点设置到文本框。
下面是获取选择文本的函数（兼容IE）

function selectText(textbox,startIndex,stopIndex){
	if(textbox.setSelectionRange){
		textbox.setSelectionRange(startIndex,stopIndex);
	}else if{
		var range=textbox.createTextRange();
		range.collapse(true);
		range.moveStart("character",stratIndex);
		range.moveEnd("character",stopIndex-startIndex);
		range.select();
	}
	text.box.focus();//为文本设置焦点，以便用户可以看到文本框中选择的文本；
}
//这种选择部分文本框的技术在实现高级文本输入框时很有用！！！！

七、过滤输入
我们经常会在文本框内输入特定的数据，或者输入特定格式的数据，因此必须使用JavaScript来完成过滤输入的操作。
1、屏蔽字符
有时候我们需要输入的文本不包含或包含某些字符，文本框响应的是keypress事件，因此我们可以通过屏蔽此事件的默认行为来屏蔽此类字符。

text.onkeypress=function(event){
                event=Events.getEvent(event);
                var target=Events.getTarget(event);
                var charCode=Events.getCharCode(event);
                if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&& !event.ctrlKey){
                    Events.preventDefault(event);
                    alert("非法字符，请输入数字！");
                }
            }

八、html5约束验证API
在表单提交数据到服务器之前验证数据
1、验证属性


2、输入模式
HTML5位文本字段新增了pattern属性，属性值是一个正则表达式，用于匹配文本框中的值。
3、检测有效性
使用checkValidity（）方法可以检测表单中的某个字段是否有效

document.forms[0].elements[0].checkValidity();//检测某个表单字段
document.forms[0].checkValidity();//检测整个表单是否有效

4、禁用验证
在表单标签中使用novalidate，可以告诉表单不进行验证
在JavaScript中可以进行如下操作达到同样的效果

var form=document.getElementById("form")[0];
form.novalidity=true;

九、选择框脚本
1、相关属性
选择框时通过select标签和option标签创建的。
除了所有表单字段共有的属性和方法外，select还有下列属性和方法
——add，向控件中添加新的option元素，其位置在相关项之前
——multiple，布尔值，表示是否允许多项选择，
——options，控件中所有option元素的元素集合；
——remove，移除给定位置的选项
——selectedIndex，基于0的选中项的索引。
——size，选择框中可见的行数。
——如果选择框没有选中任何项，选择框的value值为空字符串
——如果选择框有一个选中项，而且其value值在HTML中被指定，则选择框value值等于选中项的value值
——如果选择框有一个选中项，其value值没有在HTML中指定，则选择框的value值等于选中项的文本内容
每个option元素都有一个HTMLOptionElement对象表示，该对象具有如下属性：
——index，当前option元素在options当中的索引值
——label,表示当前选项的标签
——selected，布尔值，表示当前选项是否被选中，
——text，选项的文本，
——value，选项的值，等同于HTML中的value特性。
2、选择选项
对于单选择框，访问选中项的最简单方式就是使用选择框的selecteIndex属性

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

对于多选框，访问选中项的方式是使用selected特性

selectBox.options[0].selected=true;//这里只是确定用户选择了选择框中的哪一项
//下面的函数返回了被选中项
function getSelectedOptions(selectBox){
	var result=new Array();
	var option=null;
	var len=selectBox.options.length;
	for(var i=0;i<len;i++){
		option=selectBox.options[i];
		if(option.selected){
			result.push(option);
		}
	}
	return result;
}