JavaScript高級程序設計學習筆記--表單腳本 - Gyoung－IT工程師數位筆記本

文章出處

提交表單

用戶單擊提交按鈕或圖像按鈕時，就會提交表單。使用<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);

 }
)();