[JavaScript] 表單腳本

1. 表單

1.1 獲得表單

在html中，表單是由<form>元素來表示的，而在javascript中，表單對應的則是htmlformelement類型。htmlformelement繼承了htmlelement，因而與其他html元素具有相同的預設屬性，此外，htmlformelement也有它自己獨有的屬性和方法：

1) acceptcharset: 伺服器能夠處理的字元集。

2) action: 接受請求的url。

3) elements: 表單中所有控制的集合。

4) enctype: 請求的編碼類型。

5) length: 表單中控件的數量。

6) method: 要發送的http請求類型。

7) name: 表單的名稱。

8) reset(): 将所有表單域重置為預設值。

9) submit(): 送出表單。

10) target: 用于發送請求和接收響應的視窗名稱。

要取得<form>元素的引用，最常見的方式就是為其添加id屬性，然後再用getelementbyid()方法找到它，例如：

其次，通過document.forms可以取得頁面中所有的表單，在這個集合中，可以通過數值索引或name值來取得特定的表單，例如：

1.2 送出表單

使用者單擊送出按鈕或圖像按鈕時，就會送出表單。使用<input>或<button>都可以定義送出按鈕，隻要将其type屬性設定為"submit"，例如：

送出表單時，浏覽器會在将請求發送給伺服器之前觸發submit事件，阻止這個事件的預設行為就可以取消表單送出，例如：

以程式設計方式調用submit()方法也可以送出表單，例如：

1.3 重置表單

在使用者單擊重置按鈕時，表單會被重置。使用type屬性值為"reset"的<input>或<button>都可以建立重置按鈕，例如：

在重置表單時，所有表單字段都會恢複到頁面剛加載完畢時的初始值。使用者單擊重置按鈕時，會觸發reset事件，可以在必要時取消重置，例如：

與調用submit()一樣，也可以通過javascript來重置表單，例如：

1.4 表單字段

可以使用原生dom方法通路表單元素，每個表單都有elements屬性，該屬性是表單中所有元素的集合，例如：

如果有表單控件都在使用一個name（如單選框），那麼就會傳回以該name命名的一個nodelist。

除了<filedset>元素外，所有表單字段都擁有相同的一組屬性和方法：

1) disabled: 表示目前字段是否被禁用。

2) form: 指向目前字段所屬表單的指針。

3) name: 目前字段的名稱。

4) readonly: 表示目前字段是否隻讀。

5) tabindex: 表示目前字段的切換序号。

6) type: 目前字段的類型。

7) value: 目前字段将被送出給伺服器的值。

每個表單字段都有兩個方法：focus()和blur()。其中focus()方法用于将浏覽器的焦點設定到表單字段，blur()方法的作用是從元素中移走焦點。

所有表單字段還支援3個事件：blur、change和focus。分别在目前字段失去焦點時觸發，在内容改變時觸發，在目前字段獲得焦點時觸發。

2. 文本框腳本

2.1 選擇文本

<input>和<textarea>都支援select()方法，這個方法用于選擇文本框中的所有文本，例如：

在文本框獲得焦點時選擇其所有文本是常見做法，例如：

與select()方法對應的是一個select事件，在選擇了文本框中的文本時，就會觸發select事件。雖然可以通過select事件我們可以知道使用者什麼時候選擇了文本，但仍然不知道使用者選擇了什麼文本。沒有标準對此作出規定，是以就存在一些事實标準，其中，firefox的方案最受認可。firefox為文本框添加了兩個屬性：selectionstart和selectionend。這兩個屬性中儲存的是基于0的數值，表示所選擇文本的範圍，是以可以使用如下代碼：

firefox、safari、chrome和opera都支援這兩個屬性，ie不支援，而是有一個document.selection對象，其中儲存着使用者在整個文檔範圍内選擇的文本資訊，例如：

雖然選擇文本框中的部分文本是一種很正常的操作，但卻沒有相關标準。同樣firefox的解決方案也是這種情況下的事實标準，即為所有文本框都添加了setselectionrange()方法。這個方法接受兩個參數：要選擇的第一個字元索引和最後一個字元之後的字元索引，例如：

firefox、safari、chrome和opera都支援這種方案。ie支援使用範圍選擇部分文本，ie為文本框提供了createtextrange()方法，要選擇文本框中的部分文本，必須建立一個範圍，并将其放到恰當的位置上。然後再使用movestart()和moveend()将範圍移動到位，之前還必須使用collapse()将範圍折疊到文本框的開始位置，例如：

2.2 過濾輸入

有時候我們需要控制使用者輸入，比如屏蔽所有按鍵操作，例如：

如果隻想屏蔽特定的字元，則需要檢測keypress事件，例如：

ie是第一個支援剪貼闆相關的事件，以及通過javascript通路剪貼闆資料的浏覽器，ie實作成為事實标準，safari 2、chrome和firefox 3也支援類似的事件。下列是6個剪貼闆事件：

1) beforecopy: 在發生複制操作前觸發。

2) copy: 在發生複制操作時觸發。

3) beforecut: 在發生剪切操作前觸發。

4) cut: 在發生剪切操作時觸發。

5) beforepaste: 在發生粘貼操作前觸發。

6) paste: 在發生粘貼操作時觸發。

要通路剪貼闆中的資料，可以使用clipboarddata對象。在ie中，這個對象是window對象的屬性，而在safari和chrome中，這個對象是相應event對象的屬性。但是firefox不支援clipboarddata對象，而且safari和chrome中，隻有在處理剪貼闆事件期間clipboarddata對象才有效。這個對象有三個方法：getdata()、setdata()和cleardata()。其中getdata()用于從剪貼闆中取得資料，setdata()用于放入資料，而cleardata()用于清除資料。

2.3 切換焦點

在使用者填完目前字段時，自動将焦點切換到下一個字段可以增強表單的易用性。這會使用到焦點切換的功能，例如：

3. 選擇框腳本

3.1 選擇選項

除了表單字段共有的屬性外，htmlselectelement類型還提供了下列屬性和方法：

1) add(): 向控件中添加新<option>元素。

2) multiple: 是否允許多項選擇。

3) options: 控件中所有<option>元素的htmlcollection。

4) remove(): 移除給定位置的選項。

5) selectedindex: 基于0的選中項的索引，如果沒有，則為-1，對于多選，隻儲存第一項的索引。

6) size: 選擇框中可見的行數。

在dom中，每個<option>元素都有一個htmloptionelement對象表示，它添加了下列屬性：

1) index: 目前選項在options集合中的索引。

2) label: 目前選項的标簽。

3) selected: 表示目前選項是否被選中。

4) text: 選項的文本。

5) value: 選項的值。

對于隻允許選擇一項的選擇框，通路選中項的最簡單方式，就是使用選擇框的selectedindex屬性，例如：

對于可以選擇多項的選擇框，selectedindex屬性就好像隻允許選項一項，設定selectedindex會導緻取消以前的所有選項并選擇指定的那一項，而讀取selectedindex隻會傳回選中項中第一項的索引值。

另一種選擇選項的方式，就是取得對某一項的引用，然後将其selected屬性設定為true，例如：

在允許多選的選擇框中設定選項的selected屬性，不會取消對其他選中項的選擇，因而可以動态選中任意多個項。

3.2 添加選項

可以使用javascript動态建立選項，并将它們添加到選擇框中，添加選項的方式有很多，第一種是使用dom方法，例如：

第二種方式是使用option構造函數接受兩個參數：文本和值，第二個參數可選，例如：

第三種方式是新選項的方式是使用選擇框的add()方法，這個方法接受兩個參數：要添加的新選項和将位于新選項之後的選項，如果想在清單最後一項添加，應該将第二個選項設為null，在ie中對add()方法的實作中，第二個參數是可選的，而且必須是新選項之後選項的索引，是以相容代碼不能隻傳一個參數，可以為第二個參數傳入undefined，例如：

3.3 移除選項

移除選項也有很多種，第一種可以用dom的removechild()方法，例如：

第二種可以使用選擇框的remove()主應運，這個方法接受一個參數，即要移除選項的索引，例如：

第三種是将相應選項設定為null，例如：

3.4 移動選項

使用dom的appendchild()方法，可以将第一個選擇框中的選項直接移動到第二個選擇框中，例如：

重排選項次序的過程也類似，例如：