javascript進階程式設計 第十四章--表單指令碼

標籤：javascrip   content   第一個字元   表單   命令   focus   string   rip   函數   

　　　　　　　　　　javascript進階程式設計 第十四章--表單指令碼
在HTML中表單由<form>元素表示，在js中表單對應的是HTMLFormElement類型，這個類型也有很多屬性
和方法；取得表單元素的引用還是為它添加id特性，用DOM操作來擷取表單元素；
提交表單：把<input>或<button>元素的type特性設定為"submit"，映像按鈕把<input>元素的type特性設
置為"image",也可以調用submit()方法， prevetnDefault()方法可以阻止表單提交
重設表單：把<input>或<button>元素的type特性設定為"reset"，也可以調用reset()方法
表單欄位：每個表單都有elements屬性，這個屬性是一個元素集合的有序列表，其中包含著表單的所有欄位，
如果是多個相同的元素則返回一個NodeList；所有表單欄位都有一些相同的屬性，比如：disabled, form,
name, readOnly, tabIndex, type, value等，訪問這些屬性以得到表單欄位的資訊；所有表單欄位都有focus()
和blur()方法，這兩個方法僅僅是把焦點轉移或移走而已。
文字框指令碼
<input>表示單行文字框，<textarea>表示多行文字框，他們的大多特性都相似，但是不能再HTML中給<textarea>
指定最大字元數；
選擇文本：調用select()方法選擇文字框中的文本，該方法直接調用不接收參數，但會觸發select事件；要順利
地取得選擇的文本添加selectionStart和selectionEnd屬性，表示選擇文本的範圍；substring()方法是基於
字串的位移量執行操作；選擇部分文本調用setSelectionRange()方法，這個方法接收兩個參數，要選擇的
第一個字元索引和最後一個字元索引。
過濾輸入
屏蔽字元：類似阻止表單提交的方法prevetnDefault()可以來屏蔽所有按鍵動作，當然運用這類方法要結合正則
和字元編碼
操作剪貼簿：有以下6個操作剪貼簿事件：beforecopy, copy, beforecut, cut, beforepaste, paste ,要訪問剪貼
板中的資料，要使用clipboardData對象，這個對象也是window對象和event對象的屬性，操作clipboardData
對象主要有三個方法，getData() , setData() , clearData()用於從剪貼簿中擷取資料
必要欄位：為表單欄位指定required屬性
禁用驗證：設定novalidate屬性工作表單可以不進行驗證
選擇框指令碼
選擇框通過<select>和<option>元素建立，HTMLSelectElement類型也提供了很多屬性和方法，其中value
屬性 由選中項決定，如果沒有選中項返回Null 字元串；如果value特性未指定返回選項的常值內容，選擇框的
change事件只要選中了選項就會觸發
選擇選項：訪問選中項的方法就是使用selectedIndex屬性，但是selectedIndex屬性只允許選擇一樣
添加選項：可以使用DOM方法為文本添加節點，並設定其value屬性添加到選擇框中；第二種方法就是使用
Option建構函式來建立新選項，接收文本值和value值；第三種方法就是調用add()方法，接受兩個參數：要添
加的新選項和將位於新選項之後的選項。
移除選項：1.使用DOM操作的removeChild()方法 2.使用選擇框的remove()方法 3.將相應的值設為null
富文本編輯：富文本編輯的本質就是在頁面中嵌入一個包含空HTML頁面的iframe，通過設定designMode
屬性為"on"值，就可以編輯常值內容了；另一種編輯富文本的方式就是使用名為contenteditable屬性，這個
屬性可以應用給頁面中任何元素，設定了這個屬性的元素就像變成了<textarea>元素一樣
操作富文本：與富文字編輯器互動的主要方式就是使用document.execCommand()方法，需要傳遞三個參數
要執行的命令名稱，false，執行命令必須的一個值；queryCommandEnabled()方法用來檢測是否可以針對
當前選擇的文本執行某個命令，結果返回一個布爾值；queryCommandValue()方法用於取得執行命令時傳入
的值
表單域富文本：富文字編輯器中的HTML不會自動認可給伺服器，需要手工提取並提交HTML，因為用我們
構建的富文字編輯器並不是一個表單欄位，因此在將其內容提交給伺服器之前，必須將iframe或contenteditable
元素中的HTML複製到一個表單欄位中

javascript進階程式設計 第十四章--表單指令碼