JS高程3：表單腳本

HTML和CSS對錶單的操做仍是比較乏力的，在表單操做中，JS勢必會使用到。

• 基礎知識
• 文本框
• 選擇框
• 序列化
• 富文本編輯器

基礎知識

 

HTMLFormElement接口能夠建立或者修改<form>對象;它繼承了HTMLElement接口的方法和屬性。

常見的方法和屬性：

HTMLFormElement.acceptCharset

至關於HTML中的accept-charset屬性，包含服務器可以接受的字符編碼列表。

HTMLFormElement.action

至關於HTML中的action屬性，接收請求的URL。

HTMLFormElement.elements只讀

表單中全部控件的集合（HTMLFormControlsCollection）。

HTMLFormElement.enctype

至關於HTML中的enctype屬性，請求編碼的類型。

HTMLFormElement.length 只讀

表單中控件的數量。

HTMLFormElement.method

至關於HTML中的method屬性，HTTP請求的類型。

HTMLFormElement.name

至關於HTML中的name屬性，表單的名稱。

HTMLFormElement.target

至關於HTML中的target的屬性，用於發送請求和接收響應的窗口名稱。

HTMLFormElement.submit()

提交表單到服務器。

HTMLFormElement.reset()

將表單域重置爲默認。

更詳細的內容請訪問：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement

獲取<form>元素的方式有多種，其中最多見的是getElementById()方法：

var form = document.getElementById("form1");

其次，能夠經過document.forms取得全部表單，而後經過數值索引或者name值來獲取特定的表單：

var firstForm = document.forms[0]; //取得頁面中的第一個表單
var myForm = document.forms["form2"]; //取得頁面中名稱爲"form2"的表單

 

提交表單

 

用戶點擊提交按鈕或者圖像按鈕時，就會提交表單。使用<input>或者<button>元素均可以自定義提交按鈕。

元素的type屬性值要設置爲「submit」，圖像按鈕設置爲「image」：

<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 圖像按鈕 -->
<input type="image" src="graphic.gif">

在表單控件擁有焦點的狀況下，按回車鍵就能提交表單（textarea是個例外，在文本中回車會換行）。

瀏覽器會在將請求發送給服務器以前觸發 submit 事件。這樣，咱們就有
機會驗證表單數據，並據以決定是否容許表單提交。阻止這個事件的默認行爲就能夠取消表單提交。例
如，下列代碼會阻止表單提交：

var form = document.getElementById("myForm"); EventUtil.addHandler(form, "submit", function(event){ //取得事件對象
event = EventUtil.getEvent(event); //阻止默認事件
EventUtil.preventDefault(event); });

這裏使用了EventUtil 對象，以便跨瀏覽器處理事件。調用 prevetnDefault()
方法阻止了表單提交。通常來講，在表單數據無效而不能發送給服務器時，可使用這一技術。

在 JavaScript 中，以編程方式調用 submit()方法也能夠提交表單。並且，這種方式無需表單包含
提交按鈕，任什麼時候候均可以正常提交表單。來看一個例子 ：

var form = document.getElementById("myForm"); //提交表單
form.submit();

在以調用 submit()方法的形式提交表單時，不會觸發 submit 事件，所以要記得在調用此方法之
前先驗證表單數據。

提交表單時可能出現的最大問題，就是重複提交表單。在第一次提交表單後，若是長時間沒有反
應，用戶可能會變得不耐煩。這時候，他們也許會反覆單擊提交按鈕。結果每每很麻煩（由於服務器
要處理重複的請求），或者會形成錯誤（若是用戶是下訂單，那麼可能會多訂好幾份）。解決這一問題
的辦法有兩個：在第一次提交表單後就禁用提交按鈕，或者利用 onsubmit 事件處理程序取消後續的
表單提交操做。

 

重置表單

 

在用戶單擊重置按鈕時，表單會被重置。使用 type 特性值爲"reset"的<input>或<button>都
能夠建立重置按鈕，以下面的例子所示 ：

<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>

這兩個按鈕均可以用來重置表單。在重置表單時，全部表單字段都會恢復到頁面剛加載完畢時的初
始值。若是某個字段的初始值爲空，就會恢復爲空；而帶有默認值的字段，也會恢復爲默認值。
用戶單擊重置按鈕重置表單時，會觸發 reset 事件。利用這個機會，咱們能夠在必要時取消重置
操做。例如，下面展現了阻止重置表單的代碼 ：

var form = document.getElementById("myForm"); EventUtil.addHandler(form, "reset", function(event){ //取得事件對象
event = EventUtil.getEvent(event); //阻止表單重置
EventUtil.preventDefault(event); }); 與提交表單同樣，也能夠經過 JavaScript 來重置表單，以下面的例子所示。 var form = document.getElementById("myForm"); //重置表單
form.reset();

與調用 submit()方法不一樣，調用 reset()方法會像單擊重置按鈕同樣觸發 reset 事件。

在 Web 表單設計中，重置表單一般意味着對已經填寫的數據不滿意。重置表單
常常會致使用戶摸不着頭腦，若是意外地觸發了表單重置事件，那麼用戶甚至會很惱
火。事實上，重置表單的需求是不多見的。更常見的作法是提供一個取消按鈕，讓用
戶可以回到前一個頁面，而不是不分青紅皁白地重置表單中的全部值。

 

表單字段

 

能夠像訪問頁面中的其餘元素同樣，使用原生 DOM 方法訪問表單元素。此外，每一個表單都有 elements 屬性，

該屬性是表單中全部表單元素（字段）的集合。這個 elements 集合是一個有序列表，
其中包含着表單中的全部字段，例如<input>、 <textarea>、 <button>和<fieldset>。每一個表單字
段在 elements 集合中的順序，與它們出如今標記中的順序相同，能夠按照位置和 name 特性來訪問它
們。下面來看一個例子 ：

var form = document.getElementById("form1"); //取得表單中的第一個字段
var field1 = form.elements[0]; //取得名爲"textbox1"的字段
var field2 = form.elements["textbox1"]; //取得表單中包含的字段的數量
var fieldCount = form.elements.length;

若是有多個表單控件都在使用一個 name（如單選按鈕），那麼就會返回以該 name 命名的一個
NodeList。例如，如下面的 HTML 代碼片斷爲例 ：

<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>

在這個 HTML 表單中，有 3 個單選按鈕，它們的 name 都是"color"，意味着這 3 個字段是一塊兒的。
在訪問 elements["color"]時，就會返回一個 NodeList，其中包含這 3 個元素；不過，若是訪問
elements[0]，則只會返回第一個元素。來看下面的例子 ：

var form = document.getElementById("myForm"); var colorFields = form.elements["color"]; alert(colorFields.length); //3
var firstColorField = colorFields[0]; var firstFormField = form.elements[0]; alert(firstColorField === firstFormField); //true

以上代碼顯示，經過 form.elements[0]訪問到的第一個表單字段，與包含在 form.elements
["color"]中的第一個元素相同 。

也能夠經過訪問表單的屬性來訪問元素，例如 form[0]能夠取得第一個表單字 段，而 form["color"]則能夠取得第一個命名字段。這些屬性與經過 elements 集 合訪問到的元素是相同的。可是，咱們應該儘量使用 elements，經過表單屬性訪 問元素只是爲了與舊瀏覽器向後兼容而保留的一種過渡方式。

1.共有的表單字段屬性

除了<fieldset>元素以外，全部表單字段都擁有相同的一組屬性。因爲<input>類型能夠表示多
種表單字段，所以有些屬性只適用於某些字段，但還有一些屬性是全部字段所共有的。表單字段共有的
屬性以下 ：

 disabled：布爾值，表示當前字段是否被禁用。  form：指向當前字段所屬表單的指針；只讀。  name：當前字段的名稱。  readOnly：布爾值，表示當前字段是否只讀。  tabIndex：表示當前字段的切換（tab）序號。  type：當前字段的類型，如"checkbox"、 "radio"，等等。  value：當前字段將被提交給服務器的值。對文件字段來講，這個屬性是隻讀的，包含着文件 在計算機中的路徑。

除了 form 屬性以外，能夠經過 JavaScript 動態修改其餘任何屬性。來看下面的例子 ：

var form = document.getElementById("myForm"); var field = form.elements[0]; //修改 value 屬性
field.value = "Another value"; //檢查 form 屬性的值
alert(field.form === form); //true //把焦點設置到當前字段
field.focus(); //禁用當前字段
field.disabled = true; //修改 type 屬性（不推薦，但對<input>來講是可行的）
field.type = "checkbox";

可以動態修改表單字段屬性，意味着咱們能夠在任什麼時候候，以任何方式來動態操做表單。例如，很
多用戶可能會重複單擊表單的提交按鈕。在涉及信用卡消費時，這就是個問題：由於會致使費用翻番。
爲此，最多見的解決方案，就是在第一次單擊後就禁用提交按鈕。只要偵聽 submit 事件，並在該事件
發生時禁用提交按鈕便可。如下就是這樣一個例子 ：

//避免屢次提交表單
EventUtil.addHandler(form, "submit", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); //取得提交按鈕
var btn = target.elements["submit-btn"]; //禁用它
btn.disabled = true; });

以上代碼爲表單的 submit 事件添加了一個事件處理程序。事件觸發後，代碼取得了提交按鈕
並將其 disabled 屬性設置爲 true。注意，不能經過 onclick 事件處理程序來實現這個功能，原
因是不一樣瀏覽器之間存在「時差」：有的瀏覽器會在觸發表單的 submit 事件以前觸發 click 事件，
而有的瀏覽器則相反。對於先觸發 click 事件的瀏覽器，意味着會在提交發生以前禁用按鈕，結果
永遠都不會提交表單。所以，最好是經過 submit 事件來禁用提交按鈕。不過，這種方式不適合表
單中不包含提交按鈕的狀況；如前所述，只有在包含提交按鈕的狀況下，纔有可能觸發表單的 submit
事件。

除了<fieldset>以外，全部表單字段都有 type 屬性。對於<input>元素，這個值等於 HTML 特
性 type 的值。對於其餘元素，這個 type 屬性的值以下表所列 ：

此外， <input>和<button>元素的 type 屬性是能夠動態修改的，而<select>元素的 type 屬性
則是隻讀的。

2.共有的表單字段方法

每一個表單字段都有兩個方法： focus()和 blur()。其中， focus()方法用於將瀏覽器的焦點設置
到表單字段，即激活表單字段，使其能夠響應鍵盤事件。例如，接收到焦點的文本框會顯示插入符號，
隨時能夠接收輸入。使用 focus()方法，能夠將用戶的注意力吸引到頁面中的某個部位。例如，在頁面
加載完畢後，將焦點轉移到表單中的第一個字段。爲此，能夠偵聽頁面的 load 事件，並在該事件發生
時在表單的第一個字段上調用 focus()方法，以下面的例子所示 ：

EventUtil.addHandler(window, "load", function(event){ document.forms[0].elements[0].focus(); });

要注意的是，若是第一個表單字段是一個<input>元素，且其 type 特性的值爲"hidden"，那麼
以上代碼會致使錯誤。另外，若是使用 CSS 的 display 和 visibility 屬性隱藏了該字段，一樣也會
致使錯誤。

HTML5 爲表單字段新增了一個 autofocus 屬性。在支持這個屬性的瀏覽器中，只要設置這個屬性，
不用 JavaScript 就能自動把焦點移動到相應字段。例如 ：

<input type="text" autofocus>

爲了保證前面的代碼在設置 autofocus 的瀏覽器中正常運行，必須先檢測是否設置了該屬性，如
果設置了，就不用再調用 focus()了。

EventUtil.addHandler(window, "load", function(event){ var element = document.forms[0].elements[0]; if (element.autofocus !== true){ element.focus(); console.log("JS focus"); } });

由於 autofocus 是一個布爾值屬性，因此在支持的瀏覽器中它的值應該是 true。（在不支持的瀏
覽器中，它的值將是空字符串。）爲此，上面的代碼只有在 autofocus 不等於 true 的狀況下才會調用
focus()，從而保證向前兼容。支持 autofocus 屬性的瀏覽器有 Firefox 4+、 Safari 5+、 Chrome 和 Opera
9.6。

在默認狀況下，只有表單字段能夠得到焦點。對於其餘元素而言，若是先將其 tabIndex 屬性設置爲1，而後再調用 focus()方法，也可讓這些元素得到焦點。 只有 Opera 不支持這種技術。

與 focus()方法相對的是 blur()方法，它的做用是從元素中移走焦點。在調用 blur()方法時，
並不會把焦點轉移到某個特定的元素上；僅僅是將焦點從調用這個方法的元素上面移走而已。在早期
Web 開發中，那時候的表單字段尚未 readonly 特性，所以就可使用 blur()方法來建立只讀字段。
如今，雖然須要使用 blur()的場合很少了，但必要時還可使用的。用法以下：

document.forms[0].elements[0].blur();

3.共有的表單字段事件

除了支持鼠標、鍵盤、更改和 HTML 事件以外，全部表單字段都支持下列 3 個事件。

 blur：當前字段失去焦點時觸發。  change：對於<input>和<textarea>元素，在它們失去焦點且 value 值改變時觸發；對於 <select>元素，在其選項改變時觸發。  focus：當前字段得到焦點時觸發。

一般，可使用 focus 和 blur 事件來以某種方式改變用戶界面，要麼是向用戶給出視覺提示，要
麼是向界面中添加額外的功能（例如，爲文本框顯示一個下拉選項菜單）。而 change 事件則常常用於
驗證用戶在字段中輸入的數據。例如，假設有一個文本框，咱們只容許用戶輸入數值。此時，能夠利用
focus 事件修改文本框的背景顏色，以便更清楚地代表這個字段得到了焦點。能夠利用 blur 事件恢復
文本框的背景顏色，利用 change 事件在用戶輸入了非數值字符時再次修改背景顏色。下面就給出了實
現上述功能的代碼。

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.backgroundColor != "red"){
target.style.backgroundColor = "yellow";
}
});
EventUtil.addHandler(textbox, "blur", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});

在此， onfocus 事件處理程序將文本框的背景顏色修改成黃色，以清楚地代表當前字段已經激活。
隨後， onblur 和 onchange 事件處理程序則會在發現非數值字符時，將文本框背景顏色修改成紅色。
爲了測試用戶輸入的是否是非數值，這裏針對文本框的 value 屬性使用了簡單的正則表達式。並且，
爲確保不管文本框的值如何變化，驗證規則始終如一， onblur 和 onchange 事件處理程序中使用了相
同的正則表達式。

關於 blur 和 change 事件的關係，並無嚴格的規定。在某些瀏覽器中， blur
事件會先於 change 事件發生；而在其餘瀏覽器中，則剛好相反。爲此，不能假定這
兩個事件總會以某種順序依次觸發，這一點要特別注意。

 

文本框

 

在 HTML 中，有兩種方式來表現文本框：一種是使用<input>元素的單行文本框，另外一種是使用
<textarea>的多行文本框。

 要表現文本框，必須將<input>元素的 type 特性設置爲"text"。而經過設置 size 特性，能夠指
定文本框中可以顯示的字符數。經過 value 特性，能夠設置文本框的初始值，而 maxlength 特性則用
於指定文本框能夠接受的最大字符數。若是要建立一個文本框，讓它可以顯示 25 個字符，但輸入不能
超過 50 個字符，可使用如下代碼：

<input type="text" size="25" maxlength="50" value="initial value">

相對而言，<textarea>元素則始終會呈現爲一個多行文本框。要指定文本框的大小，可使用 rows
和 cols 特性。其中， rows 特性指定的是文本框的字符行數，而 cols 特性指定的是文本框的字符列數
（相似於<inpu>元素的 size 特性）。與<input>元素不一樣， <textarea>的初始值必需要放在
<textarea>和</textarea>之間，以下面的例子所示。

<textarea rows="25" cols="5">initial value</textarea>

 另外一個與<input>的區別在於，不能在 HTML 中給<textarea>指定最大字符數。
不管這兩種文本框在標記中有什麼區別，但它們都會將用戶輸入的內容保存在 value 屬性中。可
以經過這個屬性讀取和設置文本框的值，以下面的例子所示：

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";

咱們建議讀者像上面這樣使用 value 屬性讀取或設置文本框的值，不建議使用標準的 DOM 方法。
換句話說，不要使用 setAttribute()設置<input>元素的 value 特性，也不要去修改<textarea>
元素的第一個子節點。緣由很簡單：對 value 屬性所做的修改，不必定會反映在 DOM 中。所以，在處
理文本框的值時，最好不要使用 DOM 方法。

 

選擇文本

上述兩種文本框都支持 select()方法，這個方法用於選擇文本框中的全部文本。在調用 select()
方法時，大多數瀏覽器（Opera 除外）都會將焦點設置到文本框中。這個方法不接受參數，能夠在任何
時候被調用。下面來看一個例子

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框得到焦點時選擇其全部文本，這是一種很是常見的作法，特別是在文本框包含默認值的時
候。由於這樣作可讓用戶沒必要一個一個地刪除文本。下面展現了實現這一操做的代碼

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

將上面的代碼應用到文本框以後，只要文本框得到焦點，就會選擇其中全部的文本。這種技術可以
較大幅度地提高表單的易用性。

1.選擇事件

與 select()方法對應的，是一個 select 事件。在選擇了文本框中的文本時，就會觸發 select
事件。不過，到底何時觸發 select 事件，還會因瀏覽器而異。在 IE9+、 Opera、 Firefox、 Chrome
和 Safari 中，只有用戶選擇了文本（並且要釋放鼠標），纔會觸發 select 事件。而在 IE8 及更早版本中，

只要用戶選擇了一個字母（沒必要釋放鼠標），就會觸發 select 事件。另外，在調用 select()方法時也
會觸發 select 事件。下面是一個簡單的例子。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
var alert("Text selected" + textbox.value);
});

2.取得選擇的文本

雖然經過 select 事件咱們能夠知道用戶何時選擇了文本，但仍然不知道用戶選擇了什麼文本。
HTML5 經過一些擴展方案解決了這個問題，以便更順利地取得選擇的文本。該規範採起的辦法是添加
兩個屬性： selectionStart 和 selectionEnd。這兩個屬性中保存的是基於 0 的數值，表示所選擇
文本的範圍（即文本選區開頭和結尾的偏移量）。所以，要取得用戶在文本框中選擇的文本，可使用
以下代碼

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

因 爲 substring() 方 法 基 於 字 符 串 的 偏 移 量 執 行 操 做 ， 所 以 將 selectionStart 和
selectionEnd 直接傳給它就能夠取得選中的文本。

3.選擇部分文本

HTML5 也 爲 選 擇 文 本 框 中 的 部 分 文 本 提 供 了 解 決 方 案 ， 即 最 早 由 Firefox 引 入 的
setSelectionRange()方法。如今除select()方法以外，全部文本框都有一個setSelectionRange()
方法。這個方法接收兩個參數：要選擇的第一個字符的索引和要選擇的最後一個字符以後的字符的索引
（相似於 substring()方法的兩個參數）。來看一個例子

 

 

textbox.value = "Hello world!"
//選擇全部文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"

 

 

過濾輸入

如前所述，響應向文本框中插入字符操做的是 keypress 事件。所以，能夠經過阻止這個事件的默
認行爲來屏蔽此類字符。在極端的狀況下，能夠經過下列代碼屏蔽全部按鍵操做

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});

運行以上代碼後，因爲全部按鍵操做都將被屏蔽，結果會致使文本框變成只讀的。若是隻想屏蔽特
定的字符，則須要檢測 keypress 事件對應的字符編碼，而後再決定如何響應。例如，下列代碼只容許
用戶輸入數值。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){
EventUtil.preventDefault(event);
}
});

在這個例子中，咱們使用 EventUtil.getCharCode()實現了跨瀏覽器取得字符編碼。而後，使
用 String.fromCharCode()將字符編碼轉換成字符串，再使用正則表達式 /\d/ 來測試該字符串，從
而肯定用戶輸入的是否是數值。若是測試失敗，那麼就使用 EventUtil.preventDefault()屏蔽按鍵
事件。結果，文本框就會忽略全部輸入的非數值。

雖然理論上只應該在用戶按下字符鍵時才觸發 keypress 事件，但有些瀏覽器也會對其餘鍵觸發此
事件。 Firefox 和 Safari（3.1 版本之前）會對向上鍵、向下鍵、退格鍵和刪除鍵觸發 keypress 事件；
Safari 3.1 及更新版本則不會對這些鍵觸發 keypress 事件。這意味着，僅考慮到屏蔽不是數值的字符還
不夠，還要避免屏蔽這些極爲經常使用和必要的鍵。所幸的是，要檢測這些鍵並不困難。在 Firefox 中，所
有由非字符鍵觸發的 keypress 事件對應的字符編碼爲 0，而在 Safari 3 之前的版本中，對應的字符編
碼所有爲 8。爲了讓代碼更通用，只要不屏蔽那些字符編碼小於 10 的鍵便可。故而，能夠將上面的函數
重寫成以下所示

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
EventUtil.preventDefault(event);
}
});

這樣，咱們的事件處理程序就能夠適用全部瀏覽器了，便可以屏蔽非數值字符，但不屏蔽那些也會
觸發 keypress 事件的基本按鍵。
除此以外，還有一個問題須要處理：複製、粘貼及其餘操做還要用到 Ctrl 鍵。在除 IE 以外的全部
瀏覽器中，前面的代碼也會屏蔽 Ctrl+C、 Ctrl+V，以及其餘使用 Ctrl 的組合鍵。所以，最後還要添加一
個檢測條件，以確保用戶沒有按下 Ctrl 鍵，以下面的例子所示

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
!event.ctrlKey){
EventUtil.preventDefault(event);
}
});

通過最後一點修改，就能夠確保文本框的行爲徹底正常了。在這個例子的基礎上加以修改和調整，
就能夠將一樣的技術運用於放過和屏蔽任何輸入文本框的字符。

2.操做剪切板

下列就是 6 個剪貼板事件 ：

 beforecopy：在發生複製操做前觸發。
 copy：在發生複製操做時觸發。
 beforecut：在發生剪切操做前觸發。
 cut：在發生剪切操做時觸發。
 beforepaste：在發生粘貼操做前觸發。
 paste：在發生粘貼操做時觸發。

要訪問剪貼板中的數據，可使用 clipboardData 對象：在 IE 中，這個對象是 window 對象的
屬性；而在 Firefox 4+、 Safari 和 Chrome 中，這個對象是相應 event 對象的屬性。可是，在 Firefox、
Safari 和 Chorme 中，只有在處理剪貼板事件期間 clipboardData 對象纔有效，這是爲了防止對剪貼板
的未受權訪問；在 IE 中，則能夠隨時訪問 clipboardData 對象。爲了確保跨瀏覽器兼容性，最好只
在發生剪貼板事件期間使用這個對象。
這個 clipboardData 對象有三個方法：getData()、setData()和 clearData()。其中，getData()
用於從剪貼板中取得數據，它接受一個參數，即要取得的數據的格式。在 IE 中，有兩種數據格式： "text"
和"URL"。在 Firefox、 Safari 和 Chrome 中，這個參數是一種 MIME 類型；不過，能夠用"text"表明
"text/plain"。
相似地， setData()方法的第一個參數也是數據類型，第二個參數是要放在剪貼板中的文本。對於
第一個參數， IE 照樣支持"text"和"URL"，而 Safari 和 Chrome 仍然只支持 MIME 類型。可是，與
getData()方法不一樣的是， Safari 和 Chrome 的 setData()方法不能識別"text"類型。這兩個瀏覽器在
成功將文本放到剪貼板中後，都會返回 true；不然，返回 false。爲了彌合這些差別，咱們能夠向
EventUtil 中再添加下列方法。

var EventUtil = {
//省略的代碼
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
//省略的代碼
setClipboardText: function(event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
},
//省略的代碼
};

在須要確保粘貼到文本框中的文本中包含某些字符，或者符合某種格式要求時，可以訪問剪貼板是非
常有用的。例如，若是一個文本框只接受數值，那麼就必須檢測粘貼過來的值，以確保有效。在 paste
事件中，能夠肯定剪貼板中的值是否有效，若是無效，就能夠像下面示例中那樣，取消默認的行爲。

EventUtil.addHandler(textbox, "paste", function(event){
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardText(event);
if (!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
});

 

自動切換焦點

使用 JavaScript 能夠從多個方面加強表單字段的易用性。其中，最多見的一種方式就是在用戶填寫
完當前字段時，自動將焦點切換到下一個字段。一般，在自動切換焦點以前，必須知道用戶已經輸入了
既定長度的數據（例如電話號碼）。例如，美國的電話號碼一般會分爲三部分：區號、局號和另外 4 位
數字。爲取得完整的電話號碼，不少網頁中都會提供下列 3 個文本框：

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

爲加強易用性，同時加快數據輸入，能夠在前一個文本框中的字符達到最大數量後，自動將焦點切
換到下一個文本框。換句話說，用戶在第一個文本框中輸入了 3 個數字以後，焦點就會切換到第二個文
本框，再輸入 3 個數字，焦點又會切換到第三個文本框。這種「自動切換焦點」的功能，能夠經過下列
代碼實現：

(function(){ function tabForward(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.value.length == target.maxLength){ var form = target.form; for (var i=0, len=form.elements.length; i < len; i++) { if (form.elements[i] == target) { if (form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } } var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); EventUtil.addHandler(textbox1, "keyup", tabForward); EventUtil.addHandler(textbox2, "keyup", tabForward); EventUtil.addHandler(textbox3, "keyup", tabForward); })();