JS高级程序设计 表单部分

目录：
     表单：1.引用表单
           2.提交表单
           3.重置表单
           4.表单字段

在HTML中，表单是由<form>元素来表示的，而在javascript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因而与其他HTML元素具有相同的默认属性。不过HTMLFormElement也有自己的属性和方法:

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

1.取得<form>引用的方式：
(1).最普通的方法：为其添加一个id，然后用getElementById（）方法找到它。

var form = document.getElementByIdx_x_x("form");

(2).通过document.forms可以取得页面中的所有表单。在这个集合中可以通过数值索引或name值来取得特定的表单

      var firstFrom = document.forms[0];      //取得页面中的第一个表单
      var myForm = document.forms["form2"];   //去的页面中name值为"form2"的表单

2.提交表单(submit)
(1)通过点击按钮来提交表单，按钮有以下几种形式：

 通用提交按钮
<input type="submit" value="Submit Form" id="myForm">

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

 图像按钮
<input type="image" src="XXX.gif" id="myForm">

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单。

(2)如果想验证所提交数据的话，可以使用以下方法：

var form = document.getElementByIdx_x("myForm");
EventUtil.addHandler(form,"submit",function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);
    //阻止默认事件（一般，在表单数据无效而不能发送给服务器时，可以使用这一项技术）
    EventUtil.preventDefault(event);
});

这里使用了前面"事件"http://blog.sina.com.cn/s/blog_68cb8c790100z9sl.html这个章节中的EventUtil对象，以便跨浏览器处理事件。

(3)在javascript中，无需表单包含按钮也可以提交表单。

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

3.重置表单(reset)
(1)与提交表单一样，通过点击相应的按钮也可以做到重置按钮：

 通用重置按钮
<input type="reset" value="Reset Form">

 自定义重置按钮
<button type="reset">Reset Form</button>

(2)与提交表单一样，可以通过如下方法来阻止默认行为：

var form = document.getElementByIdx_x("myForm");
EventUtil.addHandler(form,"reset",function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);
    //阻止默认事件（一般，在表单数据无效而不能发送给服务器时，可以使用这一项技术）
    EventUtil.preventDefault(event);
});

(3)与提交表单一样，同样可以通过javascript的方法来重置表单

var form = doucment.getElementById("myForm");
//提交表单
form.reset();

4.表单字段
访问表单元素:每个表单都有一个elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序的列表。例子：

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

注意：我们应该尽量使用elements!

 

（1）共有的表单字段属性

disable	布尔值，表示当前字段是否被禁用
form	指向当前字段所属表单的指针；只读
name	当前字段的名称
readOnly	布尔值，表示当前字段是否只读
tabIndex	表示当前字段的切换(tab)序号
type	当前字段的类型， 如："checkbox"、"radio"，等等
value	当前字段将被提交给服务器的值。

除了form属性外，可以通过JavaScript动态修改其他任何属性。例:

var form = doucment.getElementById("myForm");
var field = form.elements[0];  //field是id为"myForm"表单中的第一个元素

//修改value属性
field.value = "Another value";
//检验form属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disable = true ;
//修改type属性（对<input>和<button>来说是可以的）
field.type = "checkbox";

比如在第一次单击后就禁用提交按钮。只要侦听submit事件，并在该事件发生时禁用提交按钮即可。
EventUtil.addHandler(form,"submit",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    //取得提交按钮
    var btn = target.elements["submit-btn"];
    //禁用它
    btn.disabled = true;
});

（2）共有的表单字段方法

focus()	用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件
blur()	它的作用是从元素中移走焦点

例子：可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus()方法

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

同样可以取消这个焦点：

document.forms[0].elements[0].blur();

（3）共有的表单字段事件

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

当用户改变了当前字段的焦点，或者我们调用了focus()方法或者blur()方法时，都可以触发focus和blur事件。

注意：关于blur和change事件的关系，并没有严格规定，他们触发的顺序在不同浏览器中是不同的！

1，表单

取得表单元素form的引用：
1，通过ID取得，
2，通过document.forms取得页面表单集合，
3，通过document.forms[name]取得名称为name的表单，
4，可以通过document[formName]取得表单，但不建议这种方式

表单元素独有的属性和方法：

• acceptCharset：服务器能够处理的字符集，等价于HTML中的accept-charset特性

• action：接受请求的URL，等价于HTML中的action

• elements：表单中所有控件集合

• enctype：请求的编码类型

• length：表单中控件的数量

• method：要发送的http请求类型，通常为get或post

• name：表单名称

• reset()：重置表单

• submit()：提交表单

• target：用于发送请求和接受响应的的窗口名称

(1)提交按钮

定义提交按钮：将input或button元素的type定义为submit都可以定义提交按钮，也可以将input的type定义为image来定义提交按钮；在表单获得焦点并且又提交按钮的前提下，按下回车键即可提交表单；浏览器会在将表单提交给服务器前触发submit事件，可以通过该事件来验证表单数据，通过取消事件的默认行为来阻止表单提交！
也可以通过javascript的submit()方法来提交表单，但是该方法不会触发submit事件事件，因此应在调用该方法之前验证表单！
阻止用户多次提交表单：在第一次提交表单后就禁用提交按钮或利用onsubmit事件处理程序来阻止表单提交！

(2)重置表单

定义重置按钮：将input或button元素的type定义为reset都可以定义提交按钮，重置表单会触发reset事件，可以在必要时通过该事件来阻止表单重置！
也可以通过javascript的reset()方法来重置表单，该方法会触发reset事件！

(3)表单字段

每个表单都有一个elements属性，该属性是表单中所有控件的集合；该集合的顺序与他们出现在标记中的顺序相同，可按照位置或name来访问其中的元素：document.forms[0].elements[0]或者document.forms[0].elements[name]；如果有多个表单控件使用同一个name，就会返回一个NodeList！

   1，共有表单字段属性

除了fieldset元素外，所有表单字段都拥有相同的一组属性。由于input元素可以表示多种表单字段，因此有些字段只适用于某些字段，但还有一些属性是所有字段共有的：

• disabled：布尔值，表示当前字段是否被禁用

• form：指向当前字段所在表单的指针，只读

• name：当前字段的名称

• readOnly：布尔值，表示当前字段是否只读

• tabIndex：表示当前字段的tab顺序

• type：当前字段的类型

• value：当前字段将被提交给服务器的值（对于文件字段，该值为只读）

可以通过触发submit事件后设置disabled属性，以在提交表单后禁用提交按钮，但不能使用click事件来实现，因为不同浏览器的submit触发顺序可能不同，如果如果click事件在submit事件之前发生，此时禁用该按钮，就意味着永远不会提交该表单了！不过此方法不适用于使用javascript的submit()方法设置的表单提交，因为该方法不会触发submit事件！

   2，共有表单字段方法

   每个表单字段都有两个方法：focus()和blur()；通常侦听页面的load事件，触发该事件后在表单的某个字段调用focus()方法，已将焦点转移到表单中的该字段，例如百度首页！
   在默认情况吓，只有表单字段能够获得焦点，对于其他元素，如果先将其tabIndex设置为-1，再调用focus()方法，也可以让这些元素获得焦点（opera不支持）。
   blur()方法用于从元素上移开焦点！

   3，共有表单事件

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

change：对于input或textarea元素，失去焦点且value改变时触发；对于select则是在其选项改变时触发，并且只要改变选项即使没失去焦点也会触发！

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

2，文本框脚本

两种方式创建文本框：
input：type=text，size特性显示的字符个数，maxlength特性设置文本框可接受最大字符数    
textarea：textarea元素始终呈现为一个多行文本框，可以用rows和cols特性指定文本框行数和列数，该元素无法设置可接受最大字符数量！和input一样，用户输入的内容都保存在value属性中！

(1)选择文本

以上文本框都支持select()方法，该方法用于选中文本框内所有文本；一般用于当文本框获得焦点时选中所有默认文本；

   1，选择事件：与select()方法对应的是select事件,在选中文本框中的文本时触发该事件，并且不同浏览器触发该事件的时间不同，在opera ff chrome sf中，只有用户选择了文本，并且释放鼠标才会触发该事件；而在IE中，只要选择了一个字符就会触发该事件；另外在IE FF opera中调用secect()方法也会触发该事件，而sf和chrome则不会！

   2，取得选择的文本：ff为文本框提供了selecttionStart和selectionEnd两个属性，这两个属性分别保存着所选择文本的起始位置和结束位置！可以通过着两个属性配合string的substring()方法取得所选字符串！除IE外的浏览器都支持这两个属性，在IE下有一个*document.selection对象，该对象保存着用户在整个文档区域内所选择的文本信息，但是无法确定用户具体选择页面哪个部分的文本；要取得所选文本需要先创建一个范围：document.selection.createRange()，然后通过text属性即可取得所选内容！
兼容方法：
function getSelectedText(obj){
 if(document.selection){
   return document.selection.createRange().text;
 } else {
   return obj.value.substring(obj.selectionStart,obj.selectionEnd);
 }
}

   3，选择部分文本：ff为所有文本框添加了一个setSelectionRange()方法，该方法接受两个参数，即要选择的文本的起始和结束索引；除IE外的浏览器都支持该方法，IE则使用范围选择部分文本，为文本框提供了createTextRange()方法，使用方法及兼容code如下：
if(obj.setSelectionRange){
 obj.setSelectionRange(start,end)
} else {
 var range=obj.createTextRange();
 range.collapse(true);
 range.moveStart("character",start);//start为开始位置
 range.moveEnd("character",length);//length为选择的长度
 range.select();
}
obj.focus();//要想看到文本框中的文本被选中的效果，必须让文本框获得焦点！

(2)过滤输入

   1，屏蔽字符：通常通过检测keypress事件对应的charCode，来判断是否是禁止输入的字符，如果是则调用事件的preventDefault()方法来屏蔽按键事件，需要注意的是有些浏览器对于非字符键也会触发keypress事件，另外还要注意复制粘贴等操作

   2，操作剪贴板：除opera外的游览器都支持剪贴板相关事件，HTML5也引入了剪切板事件：

• beforecopy：在发生复制操作前触发

• copy在发生复制操作时触发

• beforecut：在发生剪切操作前触发

• cut：在发生剪切操作时触发

• beforepaste：在发生粘贴操作前触发

• paste：在发生粘贴操作时触发

对于before***的事件，不同浏览器的实现会有所不同（p348）

3，选择框脚本

选择框除了拥有所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了下面的方法和属性：

• add(newOption,relOption)向控件中插入新的option元素，参数为要插入的值及位置

• multiple：布尔值，表示是否允许选择多项，同html的multiple属性

• options：控件中所有option元素的HTMLCollection；属性有：index集合的索引；lable当前选中项的标签；selected当前项是否被选中，布尔值；text该项的文本；value选项的值，等价于html中的value属性

• remove(index)：移除给定位置的选项

• selectedIndex：基于0的选中项索引，没有选中项则该值为-1，多项选择控件只保存第一个选中项的索引

• size：选择框中可见的行数，同HTML select元素的size属性

• 选择框的type属性默认是select-one，如果又multiple属性则是select-multipe

• 如果没有选中项，则选择框的value为空；如果选中了一项并且该项指定了value属性（即使为空也是）则等于该值，否则等于该项的文本（IE为空）；如果有多个选中项其value则为第一项的值并遵循前面的规则