表單腳本
1表單的基礎(chǔ)知識
在HTML中，表單由form標(biāo)簽，在javascript中，表單對應(yīng)HTMLFormElement類型，HTMLFormElement類型繼承HTMLElement類型，所有它和其他的Element元素有相同的默認(rèn)屬性，同時它也有自己的屬性和方法：
acceptCharset：服務(wù)器能夠處理的字符集；等價于 HTML 中的 accept-charset 特性。
action：接受請求的 URL；等價于 HTML 中的 action 特性 。
elements：表單中所有控件的集合（HTMLCollection）。
enctype：請求的編碼類型；等價于 HTML 中的 enctype 特性。
length：表單中控件的數(shù)量。
method：要發(fā)送的 HTTP 請求類型，通常是"get"或"post"；等價于 HTML 的 method 特性。
name：表單的名稱；等價于 HTML 的 name 特性。
reset()：將所有表單域重置為默認(rèn)值。
submit()：提交表單。
target：用于發(fā)送請求和接收響應(yīng)的窗口名稱；等價于 HTML 的 target 特性。
1.1提交表單
使用<input>或<button>都可以定義提交按鈕。只要將其type特性的值設(shè)置為“submit”即可，二圖像按鈕則是通過將<input>的type設(shè)置為“image”來定義的。
<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 圖像按鈕 -->
<input type="image" src="graphic.gif">
在JS中我們同樣可以以編程的方式調(diào)用submit（）方法來提交表單：
var form = document.getElementById("myForm");
//提交表單
form.submit();
1.2重置表單
<!-- 通用重置按鈕 -->
<``input` `type``=``"reset"` `value``=``"Reset Form"``>
<!-- 自定義重置按鈕 -->
<``button` `type``=``"reset"``>Reset Form</``button``>
在重置表單時，所有表單字段都會恢復(fù)到頁面剛加載完畢時的初始值
用JS方法來重置表單：
var form = document.getElementById("myForm");
//重置表單
form.reset();
阻止重置表單的默認(rèn)操作：
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件對象
event = EventUtil.getEvent(event);
//阻止表單重置
EventUtil.preventDefault(event);
});
1.3表單字段
每一個表單都有element屬性。
element包含著表單的所有字段，例如：<input>，<button>等
例：
var A=document。getElementById（"form1"）;
var A1=A.element[0]; //取得表單中的第一個字段。
var A2=A.element[aaa]; //取得表單中的"aaa"字段。
所有的表單字段都擁有相同的一組屬性
disabled：
布爾值
當(dāng)前字段是否被禁用
from:
只讀
指向當(dāng)前字段所屬表單的指針
name：
當(dāng)前字段的名稱
readOnly：
布爾值
當(dāng)前字段是否只讀
tabIndex：
當(dāng)前字段的切換序號
type：
當(dāng)前字段的類型
<input>和<button>可以修改
<select>不可以修改
value:
當(dāng)前字段將被提交給服務(wù)器的值
** 表單字段的共有方法有**
focus():表單字段獲取焦點。HTML5 為表單字段新增了一個 autofocus 屬性。在支持這個屬性的瀏覽器中,只要設(shè)置這個屬性,
不用 JavaScript 就能自動把焦點移動到相應(yīng)字段。
blur():表單字段失去焦點
表單字段的共有事件有
blur:當(dāng)前字段失去焦點時觸發(fā)。
change:對于<input> 和<textarea> 元素,在它們失去焦點且 value 值改變時觸發(fā);對于<select>元素,在其選項改變時觸發(fā)。
focus:當(dāng)前字段獲得焦點時觸發(fā)。
2文本框腳本
在HTML中，有兩種方式來表現(xiàn)文本框：
使用<input>元素的單行文本框
使用<textarea>的多行文本框。
例：
<!--
文本框：
type特性為“text”
size特性：指定文本框中能顯示的字符數(shù)
value特性：設(shè)置文本框的初始值
maxlength特性：指定文本框可以接受的最大字符數(shù)
-->
<input text="text" size="25" maxlength="50" value="initial value" />
<!--
多行文本框：
rows，cols特性：指定文本框的大小，其中rows指定文本框的字符行數(shù)，cols指定文本框的字符列數(shù)
初始值必須放在<textarea></textarea>之間
不能在HTML中指定最大字符數(shù)
-->
<textarea rows="5" cols="25"></textarea>
在選擇了文本框的文本或調(diào)用select（）方法時會觸發(fā)select事件
我們可添加selectionStart和selectionEnd屬性來表示所選擇文本的范圍。
例：
function A(text){
return text.value.substring(text.selectionStart , text.selectionEnd);
}
選擇部分文本的方法有：調(diào)用createTextRange（）和調(diào)用
selectText（）
使用createTextRange（）的方法為
文本.createTextRange（第一個字符索引，最后一個字符索引）；
使用selectText（）方法為：
selectText（文本，第一個字符索引，最后一個字符索引）
例：
text.value="abcd";
text.setselect(0,text.value.length); //"abcd"
text.createTextRange(0,2); //"abc"
text.value="abcd";
selectText(text,0,2); //"abc"
JavaScript中的過濾輸入
我們可以通過檢測keypress事件對應(yīng)的字符編碼，然后在決定如何響應(yīng)。
操作剪貼板
javascript可以使用window.clipboardData對象處理剪貼板內(nèi)容。
例：
<HTML>
<HEAD>
<TITLE>測試操作剪貼板</TITLE>
</HEAD>
<script>
function copyToClipboard()
{
var d=document.all("source").value;
window.clipboardData.setData('text',d);
}
</script>
<BODY>
<button οnclick="copyToClipboard();">拷貝</button>
<input type="text" size=20 id="source" value="測試數(shù)據(jù)">
<br>
<button οnclick="alert(window.clipboardData.getData('text'));">顯示</button>
<button οnclick="window.clipboardData.clearData('text');">清空</button>
</BODY>
</HTML>
3.選擇框腳本
選擇框腳本通過<select>和<option>元素創(chuàng)建。為了方便與這個控件交互，除了所有表單字段共有的屬性和方法外，HTMLSelectElement類型還提供了以下的屬性和方法：
add(newOption, relOption)：抽向控件中插入新的<option>元素，其位置在相關(guān)項(relOption)之前。
remove(indenx)：移除給定索引位置的選項。
multiple：布爾值，表示是否允許多項選擇，與HTML中的multiple相似。
size：選擇中可見的行數(shù)。與HTML中的size特性相似。
selectedIndex：基于0的選中項的索引，如果沒有選中項，則返回-1。
選擇選項
只允許選擇一項的選擇框，訪問選中項
選擇框的selectedIndex屬性
與selectedIndex 不同，在允許多選的選擇框中設(shè)置選項的 selected 屬性，不會取消對其他選中項 的選擇，因而可以動態(tài)選中任意多個項。但是，如果是在單選選擇框中，修改某個選項的 selected 屬性則 會取消對其他選項的選擇。需要注意的是，將 selected 屬性設(shè)置為 false 對單選選擇框沒有影響；selected 屬性的作用主要是確定用戶選擇了選擇框中的哪一項
添加選項
使用 Option 構(gòu)造函數(shù)來創(chuàng)建新選項
Option 構(gòu)造函數(shù)接受兩個參數(shù)：文本（text）和值（value）；第二個參數(shù)可選。 雖然這個構(gòu)造函數(shù)會創(chuàng)建一個 Object 的實例，但兼容 DOM的瀏覽器會返回一個<option>元素
使用選擇框的 add()方法
DOM規(guī)定這個方法接受兩個參數(shù)：要添加 的新選項和將位于新選項之后的選項
移除選項
使用 DOM 的 removeChild()方法， 為其傳入要移除的選項
selectbox.removeChild(selectbox.options[0]); //移除第一個選項
使用選擇框的 remove()方法。這個方法接受一個參數(shù)，即要移除選項的索引
selectbox.remove(0); //移除第一個選項
將相應(yīng)選項設(shè)置為 null
selectbox.options[0] = null; //移除第一個選項
移動和重排選項
移動：使用 DOM 的 appendChild()方法，可以將第一個選擇框中的選項直接移動到第二個選擇框中
為 appendChild()方法傳入一個文檔中已有的元素，那么就會先從該元素的 父節(jié)點中移除它，再把它添加到指定的位置
移動選項與移除選項有一個共同之處，即會重置每一個選項的 index 屬性
重排：將選擇框中的某一項移動到特定位置，合適的 DOM 方法就是 insertBefore()；appendChild()方法只適用于將選項添加 到選擇框的后
IE7存在使用DOM方法重排的選項不能馬上正確顯示的頁面重繪問題
表單序列化
在 JavaScript中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實現(xiàn)對表單的序列化
富文本編輯
又稱為 WYSIWYG（What You See Is What You Get，所見即所得）
本質(zhì)：在頁面中嵌入一個包含空 HTML頁面的 iframe。通過設(shè)置 designMode 屬性，這個空白 的 HTML頁面可以被編輯，而編輯對象則是該頁面元素的 HTML代碼
designMode 屬性有兩 個可能的值："off"（默認(rèn)值）和"on"。在設(shè)置為"on"時，整個文檔都會變得可以編輯（顯示插入符 號），然后就可以像使用字處理軟件一樣，通過鍵盤將文本內(nèi)容加粗、變成斜體，等等
contenteditable屬性
把 contenteditable 屬性應(yīng)用給頁面中的任何元素，然后用戶立即就可以編輯該元素
該屬性不需要iframe、空白頁、JavaScript
contenteditable 屬性有三個可能的值："true"表示打開、"false"表示關(guān)閉，"inherit"表示 從父元素那里繼承（因為可以在 contenteditable 元素中創(chuàng)建或刪除元素）
操作富文本
交互的主要方式使用 document.execCommand()
為 document.execCommand()方法傳遞 3個參數(shù)： 要執(zhí)行的命令名稱、表示瀏覽器是否應(yīng)該為當(dāng)前命令提供用戶界面的一個布爾值和執(zhí)行命令必須的一個值（如果不需要值，則傳遞 null）
確?？鐬g覽器的兼容性，第二個參數(shù)應(yīng)該始終設(shè)置為 false
不同的瀏覽器會產(chǎn)生一些不同
執(zhí)行 bold 命令時，IE和 Opera會使用標(biāo)簽包圍文本，Safari和 Chrome使用標(biāo)簽，而 Firefox則使用標(biāo)簽
與命令相關(guān)的一些方法
queryCommandEnabled()
可以用它來檢 測是否可以針對當(dāng)前選擇的文本，或者當(dāng)前插入字符所在位置執(zhí)行某個命令
接收一個參數(shù)，即要 檢測的命令
如果當(dāng)前編輯區(qū)域允許執(zhí)行傳入的命令，這個方法返回 true，否則返回 false
queryCommandState()
用于確定是否已將指定命令應(yīng)用到了選擇的文本
queryCommandValue()
用于取得執(zhí)行命令時傳入的值
富文本選區(qū)
使用框架（iframe）的 getSelection()方法，可以確定實際選擇的文本。 這個方法是 window 對象和 document 對象的屬性，調(diào)用它會返回一個表示當(dāng)前選擇文本的 Selection 對象
表單與富文本
由于富文本編輯是使用 iframe 而非表單控件實現(xiàn)的，因此從技術(shù)上說，富文本編輯器并不屬于表 單
不會自動提交給服務(wù)器，需要我們手動進行提交，可以添加一個隱藏的表單字段，讓它的值等于從 iframe 中提取出的 HTML
通過 表單的 onsubmit 事件處理程序?qū)崿F(xiàn)從 iframe 中提取出 HTML，并將其插入到隱藏的字段中
