前端開始的那件事——表單

ZhangCheng發表於2018-05-24
前端

首先推薦以下自己的輕量無依賴富文字編輯器：

CCEditor

覺得不錯，給個star支援一下，謝謝

JavaScript最初的一個應用，就是分擔伺服器處理表單的責任，打破處處依賴伺服器的局面。儘管目前的Web和JavaScript已經有了長足的發展，但Web表單的變化並不明顯。由於Web表單沒有為許多常見任務提供現成的解決手段，很多開發人員不僅會在驗證表單時使用JavaScript，而且還增強了一些標準表單控制元件的預設行為。

表單的基礎知識

在HTML中，表單是由<form>元素來表示的，，而在JavaScript中，表單對應的則是HTMLFormElement型別。HTMLFormElement繼承了HTMLElement，因而與其他HTML元素具有相同的預設屬性。不過，HTMLFormElement也有它自己獨有的屬性和方法。

  • acceptCharset：伺服器能夠處理的字符集；等價於HTML中的accept-charset特性。
  • action：接收請求的URL；等價於HTML中的action特性。
  • elements： 表單中所有控制元件的集合（HTMLCollection）。
  • enctype：請求的編碼型別；等價於HTML中的enctype特性。
  • length：表單中控制元件的數量
  • method：要傳送的HTTP請求型別，通常是“get”或“post”；等價於HTML的method特性
  • name： 表單的名稱
  • reset()：將所有表單域重置為預設值
  • submit(): 提交表單
  • target：用於傳送請求和接收響應的視窗名稱；等價於HTML的target特性。

提交表單

使用者單擊提交按鈕或影象按鈕時，就會提交表單。使用<input>或<button>都可以定義提交按鈕，只要將其type特性的值設定為submit即可，而影象按鈕則是通過將<input>的type特性值設定為“image”來定義的。

只要表單中存在上面列出的任何一種按鈕，那麼在相應表單控制元件擁有焦點的情況，

重置表單

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

<input type='reset' value='Reset Form'>

<button type='reset'>Reset Form</button>
複製程式碼

這兩個按鈕都可以用來重置表單。在重置表單時，所有表單欄位都會恢復到頁面剛載入完畢時的初始值。如果某個欄位的初始值為空，就會恢復為空；而帶有預設值的欄位，也會恢復為預設值。

與提交表單一樣，也可以通過JavaScript來重置表單。

表單欄位

可以像訪問頁面中的其他元素一樣，使用原生DOM方法訪問表單元素。

此外，每個表單都有elements屬性，該屬性是表單中所有元素的集合。這個elements集合是一個有序列表，其中包含著表單中的所有欄位

共有的表單欄位屬性

除了<fieldset>元素之外，所有表單欄位都擁有相同的一組屬性。由於<input>型別可以表示多種表單欄位，因此有些屬性只適用於某些欄位，但還有一些屬性是所有欄位所共有的。表單欄位共有的屬性和方法如下。

  • disabled： boolean 表示當前欄位是否被禁用。
  • form:指向當前欄位所屬表單的指標；只讀。
  • name：當前欄位的名稱。
  • readOnly： boolean 表示當前欄位是否只讀。
  • tabIndex： 表示當前欄位的切換（tab）序號。
  • type： 當前欄位的型別，如“checkbox”、“radio”等等。
  • value： 當前欄位將被提交給伺服器的值。對檔案欄位來說，這個屬性是隻讀的，包含著檔案在計算機中的路徑。

可以使用JavaScript動態修改其他任何屬性。

// 避免多次提交表單
form.addEventListener('submit', function (e) {
    var target = e.target;
    
    // 取得提交按鈕
    var btn = target.elements['submit-btn'];
    
    //禁用它
    btn.disabled = true;
})
複製程式碼

以上程式碼為表單的submit事件新增了一個事件處理程式。事件觸發後，程式碼取得了提交按鈕並將其disabled屬性設定為true。

注意，不能通過onclick事件處理程式來實現這個功能，原因是不同瀏覽器之間存在“時差”：有的瀏覽器會在觸發表單的submit事件之前觸發click事件，有的瀏覽器則相反。對於先觸發click事件的瀏覽器，意味著會在提交發生之前禁用按鈕，結果永遠都不會提交表單。因此，最好是通過submit事件來禁用提交按鈕。不過，這種方式不適合表單中不包含提交按鈕的情況；如前所述，只有在包含提交按鈕的情況下，才有可能觸發表單的submit事件。

共有的表單欄位方法

每個表單欄位都有兩個方法：focus()和blur()。其中，focus()方法用於將瀏覽器的焦點設定到表單欄位，即啟用表單欄位，使其可以響應鍵盤事件。例如，接收到焦點的文字框會顯示插入符號，隨時可以接收輸入。

預設情況下，只有表單欄位可以獲得焦點。對於其他元素而言，如果現將其tabIndex屬性設定為-1，然後再呼叫focus()方法，也可以讓這些元素獲得焦點。

強調： tabindex設定為-1可以讓不能被focus的元素變的可以focus。但是設定好後，只能通過js的focus()方法來選中，無法通過鍵盤的tab選中。

共有的表單欄位事件

除了支援滑鼠、鍵盤、更改和HTML事件之外，所有表單欄位都支援下列3個事件。

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

文字框指令碼

在HTML中，有兩種方式來表現文字框：一種是使用<input>元素的單行文字框，另一種是使用<textarea>的多行文字框。這兩個控制元件非常相似，而且多數時候的行為也差不多。不過，它們之間仍然存在一些重要的區別。

如果要建立一個文字框，讓它能夠顯示25個字元，但輸入不能超過50個字元，可以使用以下程式碼：

<input type='text' size='25' maxlength='50' value='initial value'>
複製程式碼

相對而言，<textarea>元素則始終會呈現為一個多行文字框。要指定文字框的大小，可以使用rows和cols特性。其中，rows特性指定的是文字框的字元行數，而cols特性指定的是文字框的字元列數。與<input>元素不同，<textarea>的初始值必須要放在<textarea>和</textarea>之間。

另一個與<input>的區別在於，不能在HTML中給<textarea>指定最大字數。

建議通過使用value屬性讀取或設定文字框的值，不建議使用標準的DOM方法。 原因很簡單：對value屬性所作的修改，不一定會反映在DOM中。因此，在處理文字框的值時，最好不要使用DOM方法。

選擇文字

上述兩種文字框都支援select()方法，這個方法用於選擇文字框中的所有文字。在呼叫select() 方法時，大多數瀏覽器都會將焦點設定到文字框中。這個方法不接受引數，可以在任何時候被呼叫。

在文字框獲得焦點時選擇其所有文字，這是一種非常常見的做法，特別是在文字框包含預設值的時候。因為這樣做可以讓使用者不必一個一個地刪除文字。

選擇(select)事件

與select()方法對應的，是一個select事件。在選擇了文字框中的文字時，就會觸發select事件。 另外，在呼叫select()方法時也會觸發select事件。

取得選擇的文字

雖然通過select事件我們可以直到使用者什麼時候選擇了文字，但仍然不知道使用者選擇了什麼文字。 HTML5通過一些擴充套件方案解決了這個問題，以便更順利地取得選擇的文字。
該規範採取的辦法是新增兩個屬性：selectionStart和selectionEnd。
這兩個屬性中儲存的是基於0的數值，表示所選擇文字的範圍（即文字選區開頭和結尾的偏移量）。

選擇部分文字

HTML5也為選擇文字框中的部分文字提供瞭解決方案，即最早由firefox引入的setSelectionRange() 方法。現在除Select()方法之外，所有文字框都有一個setSelectionRange()方法。這個方法接收兩個引數：要選擇的第一個字元的索引和要選擇的最後一個字元之後的字元的索引。

要看到選擇的文字，必須在呼叫setSelectionRange()之前或之後立即將焦點設定到文字框。

過濾輸入

我們經常會要求使用者在文字框中輸入特定的資料，或者輸入特定格式的資料。由於文字框在預設情況下沒有提供多少驗證資料的手段，因此必須使用JavaScript來完成此類過濾輸入的操作。而綜合運用事件的DOM手段，就可以將普通的文字框轉換成能夠理解使用者輸入資料的功能型控制元件。

遮蔽字元

響應向文字框中插入字元操作的是keypress事件。因此，可以通過阻止這個事件的預設行為 來遮蔽此類字元。

如果只想遮蔽特定的字元，則需要檢測keypress事件對應的字元編碼，然後再決定如何響應。

雖然理論上只應該在使用者按下只應該在使用者按下字元鍵時才觸發keypress事件，但有些瀏覽器也會其他鍵觸發此事件。

除此之外，還有一個問題需要處理：複製、貼上及其他操作還要用到Ctrl鍵。在除IE之外的所有瀏覽器中，前面的程式碼也會遮蔽ctrl+C、ctrl+V，以及其他使用Ctrl組合件。因此，最後還要新增一個檢測條件，以確保使用者沒有按下Ctrl鍵。

操作剪貼簿

HTML5後來也把剪貼簿事件納入了規範。下列就是6個剪貼簿事件。

  • beforecopy： 在發生複製操作前觸發。
  • copy： 在發生複製時觸發
  • beforecut
  • cut
  • beforepaste
  • paste

要訪問剪貼簿中的資料，可以使用clipboardData物件：在IE中，這個物件是window物件的屬性； 而在Firefox、Safari和Chrome中，這個物件是相應event物件的屬性。

為了確保跨瀏覽器相容性，最好只在發生剪貼簿事件期間使用這個物件。

這個clipboardData物件有三個方法：getData(format)、setData(format, value)和clearData()。

自動切換焦點

使用JavaScript可以從多個方面增強表單欄位的易用性。其中，最常見的一種方式就是在使用者填寫完當前欄位時，自動將焦點切換到下一個欄位。通常，在自動切換焦點之前，必須知道使用者已經輸入了既定長度的資料。

input有一個問題初始值長度超過maxlength不會被截斷。

HTML5約束驗證API

為了在將表單提交到伺服器之前驗證資料，HTML5新增了一些功能。有了這些功能，即便JavaScript被禁用或者用於種種原因未能載入，也可以確保基本的驗證。

換句話說，瀏覽器自己會根據標記中的規則執行驗證，然後自己顯示適當的錯誤訊息（完全不用JavaScript插手）。當然，這個功能只有在支援HTML5這部分內容的瀏覽器中才有效。

必填欄位

第一種情況是在表單欄位中指定了required屬性：

<input type='text' name='username' required>
複製程式碼

任何標註有required的欄位，在提交表單時都不能空著。

這個屬性適用於<input>、<textarea>、<select>欄位。在JavaScript中，通過對應的required 屬性，可以檢查某個表單欄位是否為必填欄位。

var isUsernameRequired = document.forms[0].elements['username'].required;
複製程式碼

另外，使用下面這行程式碼可以測試瀏覽器是否支援required屬性。

var isRequiredSupported = 'required' in document.createElement('input');
複製程式碼

其他輸入型別

HTML5為<input>元素的type屬性又增加了幾個值。這些新的型別不僅能反映資料型別的資訊，而且還能提供一些預設的驗證功能。其中“email”和“url”是兩個得到支援最多的型別，各瀏覽器也都為它們增加了定製的驗證機制。

要檢測瀏覽器是否支援這些新型別，可以在JavaScript建立一個<input>元素，然後將type屬性設定為“email”和“url”，最後再檢測這個屬性的值。不支援它們的舊版本瀏覽器會自動將未知的值設定為“text”，而支援的瀏覽器則會返回正確的值。

數值範圍

除了“email”和“url”，HTML5還定義了另外幾個輸入元素。這幾個元素都要求填寫某種基於數字的值：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”還有“time”。

輸入模式

HTML5為文字欄位新增了pattern屬性。這個屬性的值是一個正規表示式，用於匹配文字框中的值。

注意，模式的開頭和末尾不用加^和$符號（假定已經有了）。這兩個符號表示輸入的值必須從頭到尾都與模式匹配。

與其他輸入型別相似，指定pattern也不能阻止使用者輸入無效的文字。這個模式應用給值，瀏覽器來判斷值是否有效。在JavaScript中可以通過pattern屬性訪問模式。

var isPatternSupported = 'pattern' in document.createElement('input')
複製程式碼

檢測有效性

使用checkValidity()方法。

與checkValidity()方法簡單地告訴你欄位是否有效相比，validity屬性則會告訴你為什麼欄位有效或無效。這個物件中包含一系列屬性，每個屬性會返回一個布林值。

  • customError： 如果設定了setCustomValidity()，則為true，否則返回false。
  • patternMismatch：如果值與特定的pattern屬性不匹配，返回true。
  • rangeOverflow: 如果值比max值大，返回true
  • rangeUnderflow：如果值比min值小，返回true
  • stepMisMatch：如果min和max之間的步長值不合理，返回true
  • tooLong：如果值的長度超過了maxlength屬性指定的長度，返回true。有的瀏覽器會自動約束字元數量，因此這個值可能永遠都返回false。
  • typeMismatch：如果值不是mail或url要求的格式，返回true
  • valid：如果這裡的其他屬性都是false，返回true。checkValidity()也要求相同的值。
  • valueMissing： 如果標註為required的欄位中沒有值，返回true。

禁用驗證

通過設定novalidate屬性，可以告訴表單不進行驗證。

在JavaScript中使用noValidate屬性可以取得或設定這個值，如果這個屬性存在，值為true，如果不存在，值為false。

document.forms[0].noValidate = true; //禁用驗證
複製程式碼

選擇框指令碼

選擇框是通過<select>和<option>元素建立的。為了方便與這個控制元件互動，除了所有表單欄位共有的屬性和方法外，HTMLSelectElement型別還提供了下列屬性和方法。

  • add(newOption, relOption): 向控制元件中插入新<option>元素，其位置在相關項(relOption)之前。
  • multiple：布林值，表示是否允許多項選擇；等價於HTML中的multiple特性。
  • options：控制元件中所有<option>元素的HTMLCollection。
  • remove(index)：移除給定位置的選項
  • selectedindex：基於0的選中項的索引，如果沒有選中項，則值為-1。對於支援多選的控制元件，只儲存選中項中第一項的索引。
  • size：選擇框中可見的行數；等價於HTML中的size特性。

選擇框的type屬性不是‘select-one’，就是‘select-multiple’，這取決於HTML程式碼中有沒有multiple特性。選擇框的value屬性由當前選中項決定，相應規則如下：

  • 如果沒有選中的項，則選擇框的value屬性儲存空字串。
  • 如果有一個選中項，而且該項的value特性已經在HTML中指定，則選擇框的value屬性等於選中項的value特性。即使value特性的值是空字串，也同樣遵循此條規則。
  • 如果有一個選中項，但該項的value特性在HTML中未指定，則選擇框的value屬性等於該項的文字。
  • 如果有多個選中項，則選擇框的value屬性將依據前兩條規則取得第一個選中項的值。

在DOM中，每個<option>元素都有一個HTMLOptionElement物件表示。為便於訪問資料，HTMLOptionElement物件新增了下列屬性：

  • index：當前選項在options集合中的索引。
  • label：當前選項的標籤；等價於HTML的label特性。
  • selected：布林值，表示當前選項是否被選中。將這個屬性設定為true可以選中當前選項。
  • text： 選項的文字。
  • value：選項的值。

其中大部分屬性的目的，都是為了方便對選項資料的訪問。

var $selectbox = document.forms[0].elements['location'];

//不推薦
var text = selectbox.options[0].firstChild.nodeValue;
var value = selectbox.options[0].getAttribute('value');

//推薦
var text = selectbox.options[0].text;   //選項的文字
var value = selectbox.options[0].value;  //選項的值
複製程式碼

在操作選項時，我們建議最好是使用特定於選項的屬性，因為所有瀏覽器都支援這些屬性。在將表單控制元件作為DOM節點的情況下，實際的互動方式則會因瀏覽器而異。我們不推薦使用標準DOM技術修改<option>元素的文字或者值。

提醒：選擇框的change事件與其他表單欄位的change事件觸發的條件不一樣。其他表單欄位的change事件是在值被修改且焦點離開當前欄位時觸發，而選擇框的change事件只要選中了選項就會觸發。

選擇選項

對於只允許選擇一項的選擇框，訪問選中項的最簡單方式，就是使用選擇框的selectedIndex屬性：

var selectedOption = selectbox.options[selectbox.selectedIndex];

var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];

alert("Selected index: " + selectedIndex + '\nSelected text: ' + 
selectedOption.text + '\nSelected value: ' + selectedOption.value);
複製程式碼

對於可以多選的選擇框，selectedIndex會導致取消以前的所有選項並選擇指定的那一項，而讀取selectedIndex則只會返回選中項中第一項的索引值。

另一種選擇選項的方式，就是取得對某一項的引用，然後將其selected屬性設定為true。例如，下面的程式碼會選中選擇框中的第一項：

selectbox.options[0].selected = true;
複製程式碼

實際上，selected屬性的作用主要是確定使用者選擇了選擇框中的哪一項。要取得所有選中的項，可以迴圈遍歷選項集合，然後測試每個選項的selected屬性。


複製程式碼

新增選項

  • 可以使用JavaScript動態建立選項，並將它們新增到選擇框中。新增選項的方式有很多。

使用DOM的方法：

var $newOption = document.createElement('option');
$newOption.appendChild(document.createTextNode('Option text'));
newOption.setAttribute(newOption);
複製程式碼

  • 第二種方式是使用Option建構函式來建立選項，這個建構函式是DOM出現之前就有的。

  • 第三種新增新選項的方式是使用選擇框的add()方法。DOM規定這個方法接受兩個引數：要新增的新選項和將位於新選項之後的選項。

移除選項

與新增選項型別，移除選項的方式也有很多種。首先，可以使用DOM的removeChild()方法，為其傳入要移除的選項：

selectbox.removeChild(selectbox.options[0]); //移除第一個選項
複製程式碼

其次，可以使用選擇框的remove()方法。這個方法接受一個引數，即要移除選項的索引。

selectbox.remove(0)
複製程式碼

最後一種方式，就是將相應選項設定為null。這種方式也是DOM出現之前瀏覽器的遺留機制。

selectbox.options[0] = null; //移除第一個選項
複製程式碼

移動和重排選項

我們知道，如果為appendChild()方法傳入一個文件中已有的元素，那麼就會先從該元素的父節點中移除它，再把它新增到指定的位置。

移動選項與移除選項有一個共同之處，即會重置每一個選項的index屬性。

重排選項次序的過程也十分類似，最好的方式仍然是使用DOM方法。要將選擇框中的某一項移動到特定位置，最合適的DOM方法就是insertBefore();appendChild()方法只適用於將選項新增到選擇框的最後。

var $lastOption = $selectDom.options[$selectDom.options.length - 1];
$selectDom.insertBefore($lastOption, $selectDom.options[0]);
複製程式碼

表單序列化

隨著Ajax的出現，表單序列化已經成為一種常見需求。在JavaScript中，可以利用表單欄位的type屬性，連同name和value屬性一起實現對錶單的序列化。

在編寫程式碼之前，有必須先搞清楚在表單提交期間，瀏覽器是怎樣將資料傳送給伺服器的：

  • 對錶單欄位的名稱和值進行URL編碼，使用&分割。
  • 不傳送禁用的表單欄位。
  • 只傳送勾選的核取方塊和單選按鈕。
  • 不傳送type為“reset”和“button”的按鈕。
  • 多選選擇框中的每個選中的值單獨一個條目。
  • 在單擊提交按鈕提交表單的情況下，也會傳送提交按鈕；否則，不傳送提交按鈕。也包括type為“image”的元素。
  • 元素，它可能是單選框也可能是多選框。為此，需要遍歷控制元件中的每一個選項，並在相應選項被選中的情況下向陣列中新增一個值。
  • 對於單選框，只可能有一個選中項，而多選框則可能有零或多個選中項。需要確定使用什麼值。如果不存在value特性，或者雖然存在該特性，但值為空字串，都要使用選項的文字來代替。
  • 為檢查這個特性，在DOM相容的瀏覽器中需要使用hasAttribute()方法。
  • 如果表單中包含
    元素，則該元素會出現在元素集合中，但沒有type屬性。因此，如果type屬性未定義，則不需要對其進行序列化。同樣，對於各種按鈕以及檔案輸入欄位也是如此。
  • 對於單選按鈕和核取方塊，要檢查checked屬性是否被設定為false，如果是則退出switch語句。如果checked屬性為true，則繼續執行default語句，即將當前欄位的名稱和值進行編碼，然後新增到parts陣列中。
  • 函式的最後一步，就是使用join()格式化整個字串，也就是用和號來分隔每一個表單欄位。

富文字編輯

這一技術的本質，就是在頁面中嵌入一個包含空HTML頁面的iframe。通過設定designMode屬性，這個空白的HTML頁面可以被編輯，而編輯物件則是該頁面<body>元素的HTML程式碼。designMode屬性有兩個可能的值：“off”和“on”。在設定為“on”時，整個文件都會變得可以編輯，然後就可以像使用字處理軟體一樣。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WYSIWYG</title>
</head>

<body>
    <iframe name='richedit' src="blank.htm" frameborder="1" style='width:500px;height:500px;'></iframe>
    <script>
        window.onload = function () {
            window.frames['richedit'].document.designMode = 'on';
        }
    </script>
</body>

</html>
複製程式碼

要讓iframe內部可以編輯，必須要將designMode設定為“on”，但只有在頁面完全載入之後才能設定這個屬性。因此，在包含頁面中，需要使用onload事件處理程式來在恰當的時刻設定designMode。

等到以上程式碼執行之後，你就會在頁面中看到一個類似文字框的可編輯區欄位。這個區欄位具有與其他網頁相同的預設樣式；不過，通過為空白頁面應用CSS樣式，可以修改可編輯區欄位的外觀。

使用contenteditable屬性

另一種編輯富文字內容的方式是使用名為contentieditable的特殊屬性，這個屬性也是由IE最早實現的。

Tips： difference between boolean attribute and enumerated attribute.

contenteditable屬性有三個可能的值：“true”表示開啟、“false”表示關閉，“inherit”表示從副元素那裡繼承。

操作富文字

與富文字編輯器互動的主要方式，就是使用document.execCommand()。

富文字選區

在富文字編輯器中，使用框架（iframe）的getSelection()方法，可以確定實際選擇的文字。這個方法是window物件和document物件的屬性，呼叫它會返回一個表示當前文字的Selection物件。每個Selection物件都有下列屬性。

  • anchorNode： 選區起點所在的節點。
  • anchorOffset： 在到達選區起點位置之前跳過的anchorNode中的字元數量
  • focusNode： 選區終點所在的節點
  • focusOffset： focusNode中包含在選區之內的字元數量
  • isCollapsed：布林值，表示選區的起點和終點是否重合
  • rangeCount： 選區中包含的DOM範圍的數量

Selection物件的這些屬性並沒有包含多少有用的資訊。好在，該物件的下列方法提供了更多資訊，並且支援對選區的操作。

  • addRange(range): 將指定的DOM範圍新增到選區中。
  • collapse(node, offset): 將選區摺疊到指定節點中的相應的文字偏移位置。
  • collapseToEnd(): 將選區摺疊到終點位置。
  • collapseToStart(): 將選區摺疊到起點位置。
  • containsNode(node): 確定指定的節點是否包含在選區中。
  • deleteFromDocument(): 將文件中刪除選區的文字，與document.execCommand('delete', false, null)命令的結果相同。
  • extend(node, offset): 通過將focusNode和focusOffset移動到指定的值來擴充套件選區。
  • getRangeAt(index)：返回索引對應的選區中的DOM範圍。
  • removeAllRanges(): 從選區中移除所有DOM範圍。實際上，這樣會移除選區，因為選區中至少要有一個範圍。
  • removeRange(range): 從選區中移除指定的DOM範圍。
  • selectAllChildren(node): 清除選區並選擇指定節點的所有子節點。
  • toString(): 返回選區所包含的文字內容。

Selection物件的這些方法都極為實用，它們利用了DOM範圍來管理選區。由於可以直接操作選擇文字的DOM表現，因此訪問DOM範圍與實用execCommand()相比，能夠對富文字編輯器進行更加細化的控制。

表單與富文字

由於富文字編輯是使用iframe而非表單控制元件實現的，因此從技術上說，富文字編輯並不屬於表單。所以提交編輯器內容的方法是：新增一個隱藏的表單欄位，讓它的值等於從iframe中提取出的HTML。

小結

雖然HTML和Web應用自誕生以來已經發生了天翻地覆的變化，但Web表單相對卻沒有什麼改變。使用Javascript可以增強已有的表單欄位，從而創造新的功能，或者提升表單的易用性。

  • 可以使用一些標準或非標準的方法選擇文字框中的全部或部分文字
  • 大多數瀏覽器都採用了Firefox操作選擇文字的方式，但IE仍然堅持自己的實現
  • 在文字框的內容變化時，可以通過偵聽鍵盤事件以及檢測插入的字元，來允許或禁止使用者輸入某些字元
  • 在文字框內容必須限制為某些特定字元的情況下，就可以利用剪貼簿事件來遮蔽通過貼上向文字框中插入內容的操作
  • 選擇框也是經常要通過Javascript來控制的一個表單欄位。由於有了DOM，對選擇框的操作也比以前方便多了。
  • 富文字編輯功能是通過一個包含空HTML文件的iframe元素來實現的。通過將空文件的designMode屬性設定為'on'，就可以將該頁面轉換為可編輯狀態。

相關文章