標籤：on() node ase 常用 dstat string 情況 映像 index
之前就提到了，JS建立之初是為了減少伺服器的壓力，而當時這個壓力主要體現在表單的驗證上。與此同時，JS還為WEB表單增加了一些行為。
- 表單基礎知識 go
- 文字框指令碼 go
- 選擇框指令碼 go
- 表單序列化 go
- 富文本編輯 go
JS表單基礎知識
- 通過id（所有元素通用）getElementById("");
- 通過document.form：document.forms[0] 或者 document.forms["formName"]，其中formName指的是該表單元素的name屬性值。
- 注意到表單的name屬性和id不一定相同，前者常用於捆綁表單域
- JS的HTMLFormElement對象對應於HTML中的<form>元素，在繼承了HTMLElement的屬性和方法的同時，可以調用HTML對應的屬性（如acceptCharaset、action、enctype、method、name、action、target等），同時又有一些其他的方法和屬性（如length、elements、reset()、submit()等)
- 提交表單：
- HTML中的提交，<input>或者<button>的type為submit值，或者<input>的type是image（即映像按鈕）
- JS中可以調用submit()方法，不過這種方法不會激發submit事件。
- 在激發了submit事件的情況下，可以做一系列的操作（如阻止預設行為），最重要的是，考慮到重複提交的情況，可以在觸發了submit事件後禁止這個按鈕或者解除綁定提交事件。
- 需要注意的是submit事件和click事件有時差，不能確定提交和點擊這兩個事件的先後順序，所以最好使用submit處理提交事件。
- 重設表單
- HTML中，將<input>或者<button>的type設定為reset
- JS中調用reset()方法。
- 這兩種方法都可以觸發reset事件。
- 注意：重設就表示所填寫的所有表單資訊都恢複到初始值，一般比起重設，更喜歡“取消”行為，即回到前一個頁面，而不是重設所有值。
- 表單欄位（form中具體的某一種表單類型的元素）
- 訪問：除了用DOM方法訪問之外，還可以通過<form>的elements元素進行訪問（結合索引或者元素的name屬性值）。
- 通過name屬性值，若多個表單控制項name值相同，會返回NodeList，而若是用索引，則只會返回其中一項。
- 共有的表單欄位屬性：所有表單類型的元素通用的屬性。disabled/form/name/readOnly/tabIndex/type/value。除了form屬性之外，其他屬性都可以進行動態修改。注意到若disabled=true，則禁用此表單項。
- 共有的表單欄位方法：focus()/blur()。HTML5中的autofocus屬性。
- 共有的表單欄位事件：blur、focus、change。對於change，在不同的表單控制項中觸發的次數有不同，在input或者textarea中，當失去焦點且value值改變時觸發；在select中，只要選項改變就觸發。
- 總的來說，表單的一些屬性和方法或者事件的操作方法還是很符合現實的邏輯的。可以在應用中慢慢領悟。
文字框指令碼
- <input type="text">或者<textarea>都可以指定為文字框。
- 有差異：前者基本為當行輸入文字框，可以指定size、value和maxlength等屬性。後者表現為多行文字框，可以指定rows和cols等屬性，且初始值放在<textarea>和</textarea>之間，並不能指定最大字元數。
- 相同：輸入的內容都和儲存在value屬性中。建議還是使用value屬性來設定或者擷取文字框的文本，而不是使用DOM方法（如setAttribute）,後者作出的修改不一定會反應在DOM中。
- 選擇文本
- select()：不用參數，焦點一般會設定在文字框中。在實際的操作之中，一般會讓文字框獲得焦點時選擇所有文本。
- select事件。觸發select事件的時刻因瀏覽器而異。調用select()方法的時候也會觸發select事件。
- 取得選擇的文本：
- HTML5中selectionStart和selectionEnd，可以結合substring()使用。
- IE8及之前的版本：document.selection.createRange().text
- 選擇部分文本：
- HTML5中setSelectionRange()。傳入兩個表示開始和結束位置的索引（與substring()的類似，後一個索引是結束位置的下一個索引）。
- IE8及之前的版本，需要和範圍聯合使用：首先，用collapse()將範圍摺疊刀文字框開始的位置，再向moveEnd()傳入想要選擇的字元數目，最後用範圍的select()選擇文本。如下：
textbox.value = "Hello world";
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character", textbox.value.length);//"Helloworld"
range.select();
- 要看到選擇的文本，必須在選擇了之後立即將焦點設定到文字框。其實也是很符合現實邏輯的。
- 可以憑藉上述差異實現跨瀏覽器編程。
- 過濾輸入（輸入特定資料或者特定格式的資料）
- 屏蔽字元，一般和Regex結合使用，並由於是字元輸入階段考慮和keypress事件綁定，同時要注意不要屏蔽了不該屏蔽的鍵。書中此處以輸入數值為例子。見PDFP442-P443。
- 操作剪貼簿：有一些剪貼簿事件。不同瀏覽器中有一些差異，並且並不是所有瀏覽器都支援。一般用於確粘貼到文字框中的文本符合某些要求，對粘貼過來的字元進行檢測（paste）。
- 自動切換焦點：一般應用情境：在使用者填寫完當前欄位時，自動將焦點切換到下一個欄位。書中舉了個例子。見PDF P446。
- HTML5約束驗證API：HTML5增加了一些對錶單的簡單的驗證的操作，靠瀏覽器就可以完成的一些簡單驗證。但目前增加的這些操作並不具備完善的跨瀏覽器特性，需要注意。
選擇框指令碼
- HTML中的<select>元素和<option>元素
- HTMLSelectElement具有一些特有的屬性和方法。這些都很好理解。但注意value屬性的處理，value屬性一般由當前選中的項決定（若沒有，則為null）；且優先顯示元素的value屬性的值（即使這個屬性存在卻為“”），若這個屬性不存在，才考慮該項的文本值。
- HTMLOptionElement同樣有一些特有的屬性和方法，同樣好理解。
- 注意，在涉及到表單的操作的時候，一般不用常規的DOM功能訪問資訊，因為會因瀏覽器而異，且比起專有的方法來說，更加的麻煩。
- 選擇選項：
- 第一種方法：調用selectedIndex屬性確定選中的值的索引
- 第二種方法：考慮元素的selected值，看看是true還是false。這個方法常用於確認使用者是否選中某項。
- 添加選項：
- DOM方法：建立<option>元素，確認其文本值，value屬性和值等，最後appendChild()添加
- 用Option建構函式，傳入兩個參數：文本和value，第二個參數可選。雖然建立的是一個Object執行個體，但DOM會返回一個option元素，仍然可以用appendChild()處理。
- 用選擇框的add()方法，接受兩個參數，要添加的新選項和將位於新選項之後的項。注意到IE不要求第二個參數，而DOM的卻要求，所以若想在跨瀏覽器中實現將新項插入到選項列表最後的操作，可以將第二參數設為undefined。
- 移除選項：
- DOM方法：removeChild()
- 選擇框的remove()方法
- 設為null的方法：將相應選項設定為null
- 移動和重排：這裡使用DOM的方法倒是最為便利的了。
- 移動appendChild()
- 重排：insertBefore()
表單序列化
- 主要用於提交表單中的有用資訊，在Ajax中常用。有一些規則，根據這些規則編寫序列化函數serialize(form)如PDF P455頁，比較麻煩的就是處理option，應為既可能是多選也可能是單選。
富文本編輯（WYSIWYG，所見即所得 (WYSIWYG)）
- 雖然沒有規範，但已經是事實標準（IE引領）
- 一種方法：通過包含空HTML文檔的iframe元素實現。iframe的designMode屬性設定為"on"，設定為可編輯區域。
- 注意，designMode屬性只有在載入完成之後才能設定，所以需要配合onload事件處理常式。
- 另一種方法：contenteditable屬性。可以應用在任何元素中，使該元素可以立即被編輯。
- 不需要架構、空白頁和JS
- "true"/"false"/"inherit"
- 操作富文本：document.execCommand()，三個參數：執行的命令名稱、false、執行命令所需要的值。具體命令很多，可以通過查表得到。
- 有些命令有瀏覽器差異性。不能指望富文字編輯器會產生統一的HTML
- 適用於上述的兩種方法。只要修改引用對象即可。
- queryCommandEnabled()：命令能否應用。（和命令是否已經被應用差異很大）
- queryCommandState()：命令是否已經應用。
- queryCommandValue():應用於命令的值。document.execCommand()的第三個參數。
- 富文本選取。
- 使用架構的getSelection()方法，確定實際選擇的文本。
- 返回Selection對象，具有一些方法，通常利用DOM範圍來管理選區，進行更加細化的控制。
- 表單與富文本
- 富文本利用iframe而非表單，所以提交的時候需要將富文本地區的值取出，在賦予一個表單欄位，從而實現提交的操作。這個比較好理解。
《JavaScript進階程式設計》Chapter 14 表單指令碼
