JavaScript高级程序设计学习笔记--表单脚本

提交表单

用户单击提交按钮或图像按钮时，就会提交表单。使用<input>和<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可，而图像按钮则是通过将<input>的
type特性设置为"image"来定义。

<input type="submit" vlaue="Submit Form"> --通用提交按钮
<button type="submit">Submit Form</button> --自定义提交按键
<input type="image" src="graphic.gif"/> --图像按钮

只要表单中存在上面列出的任何一种按钮，那么在相应的表单控件拥有焦点的情况下，按回车键就可以提交表单。(textarea是一个例外，在文本区中回车会换行。)
在JavaScript中，以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

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

在以调用submit()方法的形式提交表单时，不会觖submit事件，因此要记得在调用此方法之前先验证表单数据。

重置表单

在用户单击重置按键时，表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。如下面所示：

<input type="reset" vlaue="Reset Form"> --通用提交按钮
<button type="reset">Reset Form</button> --自定义提交按键

通过脚本重置

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

表单字段

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

如果有多个表单控件都在使用一个name(如单选按钮),那么就会返回以该name命名的一个NodeList.

共有的表单字段方法

每个表单字段都有两个方法：focus(获得焦点)和blur(失去焦点);

自动切换焦点

为了增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最数量后，自动将焦点切换到下一个文本框。可以通过下列代码实现：

( function(){
  function tabForward(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarge(event);
    if(target.value.length==target.maxLength){
      var form=target.form;
       for(var i=0;len=form.elements.length;i<len;i++){
         if(form.elements[i]==target){
           if(form.elements[i+1]){
             form.elements[i+1].focus();
           }
           return;
         }
       }
    }
   }
   var textbox1=document.getElementById("txtTel1");
   var textbox2=document.getElementById("txtTel2");
   var textbox3=document.getElementById("txtTel3");

   EventUtil.addHandler(textbox1,"keyup",tabForward);
   EventUtil.addHandler(textbox2,"keyup",tabForward);
   EventUtil.addHandler(textbox3,"keyup",tabForward);

 }
)();