javascript快速入門15--表單

水之原發表於2013-12-01
JavaScript

大多數Web頁面與使用者之間的互動都發生在表單中，表單中有許多互動式HTML元素如：文字域，按鈕，核取方塊，下拉選單等。從文件物件層次圖中可以看到，表單是包含在文件中的，所以要訪問表單，仍然需要通過document物件來訪問

Form物件

表單就是指的form標籤及其裡面的內容，要獲取一個表單物件，可以給某個form標籤加個id屬性，然後使用document.getElementById方法獲得。也可以使用document.getElementsByTagName("form")來獲取所有表單的集合，然後通過下標來訪問。還可以給form標籤加個name屬性，然後可以使用document.getElementsByTagName來訪問，注意，同樣要使用下標來訪問

事實上，0級DOM（0級DOM並不是任何DOM規範，事實上它是BOM的內容，但瀏覽器都實現的比較好）為我們提供了更簡單的訪問From物件的方法——使用document.formName

    <form name="formName"></form>
    var fm = document.formName;//可以這樣來直接引用該表單物件
    //與document.getElementsByTagName("form")相對應有document.forms集合
    var fm = document.forms[0];//獲取第一個Form物件

 

訪問表單元素

Form物件有個elements屬性，包是一個含了form標籤裡面的所有表單控制元件（input,select等標籤，但不包含如div之類的標籤）的偽陣列

    var fm = document.forms[0];
    alert(fm.elements.length);//length屬性報告了元素的個數

 

在之前，訪問input這類標籤和訪問其它標籤沒什麼區別，可以使用ID，也可以使用className,但當它們在表單中時，可以使用它們的nam有來訪問

    <form name="formName">
        <input name="textInput" type="text" value="文字框" />
    </form>
    alert(document.formName.textInput.value);

 

Form物件相關事件及方法

當表單提交時會發生submit事件，我們可以設定事件監聽，當使用者提交表單時檢查表單內容。同時，如果使用者輸入有誤，要阻止表單提交，可以在事件處理函式裡return false就行了，當正確時可以呼叫表單的submit方法提交表單，使用表單的submit方法時不會執行submit事件處理函式

    document.formName.onsubmit = function () {
        //檢查表單
        if (result) {
            this.submit();
        } else {
            return false;
        }
    };

 

當表單被重置時會發生reset事件，但這個事件意義不大，因為reset按鈕本身意義就不大。同時也有一個reset方法

    document.formName.onreset = function () {
        if (confirm("您真的要重置表單嗎？")) {
            this.reset();
        } else {
            return false;
        }
    };

 

表單元素

單選按鈕與核取方塊

單選按鈕與核取方塊有個共同的屬性——checked，指明該按鈕是否被選中。而不同的是，往往多個單選按鈕使用同一個name來分到相同的組，且只能有一個被選中，那麼，使用這個name訪問它時，由於多個按鈕使用同一個名字，它會返回一個陣列，而當只有一個時（事實不存在單選按鈕只有一個單獨存在的情況），它又會返回這個元素

    var radios = document.formName.radios;//頁面中多個單選按鈕name為radios
    alert(radios.length);//返回一個元素列表
    var one = document.formName.one;//只有一個
    alert(one.checked);//只返回這個元素

 

與checked類似的，它們還有個defaultChecked屬性，返回是否是在HTML指定預設選中的

單行文字框與多行文字框

單行文字框即type屬性設為text的input標籤，多行文字框即textarea，它們除了與其它input標籤一樣具有的value屬性處，還具有defaultValue屬性表示文字框中的預設文字，即在HTML裡所指定的value值的

文字框還有一個方法：select,可以使文字框中的文字呈選中狀態。

Select物件

表單元素中最複雜的就算是select物件了。select是一複合物件，它包含option標籤，也有可能包含optgroup標籤。雖然select可以多選，但我們這裡只討論單選的，多選的類似！

    //首先，獲取select物件也是通過name（當然ID仍然有效，但name更快捷）
    var select = document.formName.mySel;
    //要獲取使用者選中了第幾項，可以使用它的selectedIndex
    alert(select.selectedIndex);//這個索引號是從0開始的
    //select物件有個options偽陣列型別的屬性，包含了所有的option，可以使用下標來訪問
    alert(select.options[select.selectedIndex].value);//輸出選中項的
    alert(select.options[select.selectedIndex].text);//text屬性是option包含的文字
    //本來需要知道select裡面有多少個option，可以通過options.length
    //但HTML DOM為select物件也提供了length屬性
    alert(select.length);//輸出和options.length一樣

 

獲取選中項的值

    var mySel = document.formName.mySel;
    alert(mySel.options[mySel.selectedIndex].value);
    //更快捷的方法
    alert(mySel.value);

 

而向select物件中新增option，本可以使用document.createElement及appendChild等方法的，但HTML DOM為我們提供了更方便的方法了

    var opt = new Option("新增選項文字","選項值");//document.createElement("option");
    var select = document.formName.mySel;
    select.add(opt,select.options[0]);//將opt新增到第一個option的後面
    select.add(opt);//在IE下，沒有第二個引數時，會將opt新增到最後
    //上面的程式碼在FF下會出錯，必須使用下面的方法
    select.add(opt,null);//但這在IE會出錯
    //下面的方法可以兩全了,但長了一點
    select.add(opt,select.options[select.length-1]);
    //刪除option的方法remove
    select.remove(1);//remove接收引數為要移除

 

options陣列最特殊的一個地方在於它和真正的陣列十分相似，可以設定它的length來減少元素，也可以直接將元素賦給某項來修改

    var opts = document.formName.mySel.options;
    opts[0]=new Option("Text","Value");
    opts.length=2;//將移去第三個之後的option
    opts[3]=new Options("ABC",123);//自動新增一個元素

 

Option物件也有defaultSelected屬性返回在HTML裡指定是否是預設選中項

表單元素特性事件

當表單控制元件失去焦點時會觸發blur事件，當控制元件獲得焦點時又會觸發focus事件。與之對應，blur方法將使表單控制元件失去焦點，focus方法將使控制元件獲得焦點，與Form物件的submit方法一樣，使用JavaScript執行blur方法與focus方法並不會觸發相關事件監聽函式

select物件的change事件：當使用者選中一個選項，或者取消了對一個選項的選定時，就會發生change事件。

textarea物件的change事件：當使用者改變文字區域的值然後通過把鍵盤焦點移動到其他地方“確認”這些改變的時候，發生change事件。

select事件：當文字框中的文字被選中時發生

相關文章