1### Menu
第14章 表單腳本
14.1 表單的基礎知識
- 14.1.1 提交表單
- 14.1.2 重置表單
- 14.1.3 表單字段
14.2 文本框腳本
- 14.2.1 選擇文本
- 14.2.2 過濾輸入
- 14.2.3 自動切換焦點
- 14.2.4 HTML5 約束驗證API
14.3 選擇框腳本
14.4 表單序列化
14.5 富文本編輯
- 14.5.1 使用contenteditable屬性
- 14.5.2 操作富文本
- 14.5.3 富文本選區
- 14.5.4 表單與富文本
14.1 表單的基礎知識
- 在 HTML中，表單是由<form>元素來表示的, 而在 JavaScript 中，表單對應的則是 HTMLFormElement 類型。HTMLFormElement 繼承了 HTMLElement，因而與其他 HTML 元素具有相同的默認屬性。
- 注意，可以同時為表單指定 id 和 name 屬性，但它們的值不一定相同。
- 取得<form>元素引用的方式有好幾種:
- 最常見的方式就是將它看成與其他元素一樣，并為其添加 id 特性，然后再像下面這樣使用 getElementById()方法找到它。
- 通過 document.forms 可以取得頁面中所有的表單。在這個集合中，可以通過數值索引或
name 值來取得特定的表單
var firstForm = document.forms[0]; //取得頁面中的第一個表單
var myForm = document.forms["form2"]; //取得頁面中名稱為"form2"的表單
- 14.1.1 提交表單
<!-- 通用提交按鈕 -->
<input type="submit" value="suBmit">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 圖像按鈕 -->
<input type="image" src="box.jpg" width="100px" height="100px">
- 只要表單中存在上面列出的任何一種按鈕，那么在相應表單控件擁有焦點的情況下，按回車鍵就可以提交該表單。（textarea 是一個例外，在文本區中回車會換行。）如果表單里沒有提交按鈕，按回車
鍵不會提交表單。 - 以這種方式提交表單時，瀏覽器會在將請求發送給服務器之前觸發 submit 事件。這樣，我們就有機會驗證表單數據，并據以決定是否允許表單提交。阻止這個事件的默認行為就可以取消表單提交。例
如，下列代碼會阻止表單提交。 - from按鈕可以直接提交表單， 不用submit按鈕 form.submit();
<form id="myForm" action="http://132.232.51.128/cgi-bin/tutor3.py" target="_blank">
<span>name</span><input id="nameInput" type="text" name="name">
<span>age</span><input id="ageInput" type="text" name="age">
<input id="mySubmit" type="submit" value="suBmit"> <!-- 通用提交按鈕 -->
</form>
<script>
function getValue(event){
// 阻止submit的默認行為，也就是不提交；
event.preventDefault();
// 以下都是拿到有name的input，用來判斷用戶輸入的數據，如果
formchildren = event.target.parentNode.children; /
for (i=0, len=formchildren.length; i<len; i++){
if (formchildren[i].name){
//判斷數據
// 如果數據OK。那就調用form對象的submit方法.
// form.submit()
}
}
}
form = document.getElementById("myForm");
nameInput = document.getElementById("nameInput");
ageInput = document.getElementById("ageInput");
mySubmit = document.getElementById("mySubmit");
mySubmit.addEventListener("click", getValue, false);
</script>
- 14.1.2 重置表單
- 這兩個按鈕都可以用來重置表單。
<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>
- 14.1.3 表單字段
- 每個表單都有elements屬性
- 單中所有表單元素（字段）的集合。這個 elements 集合是一個有序列表，其中包含著表單中的所有字段，例如<input>、 <textarea>、 <button>和<fieldset>。每個表單字段在 elements 集合中的順序，與它們出現在標記中的順序相同，可以按照位置和 name 特性來訪問它們。
- 如果有幾個form element的name是同名的，那么就會返回一個NodeList；
fe = event.target.elements
alert(fe["name"])
// 會返回一個NodeList對象，里面包括所有有name屬性的form element；
var form = document.getElementById("form1");
//取得表單中的第一個字段
var field1 = form.elements[0];
//取得名為"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表單中包含的字段的數量
var fieldCount = form.elements.length;
- 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";
- 禁止重復單擊表單的提交按鈕：
// 取得提交按鈕， 并禁用它。
function getValue(event){
event.target.elements["submit"].disabled = true;
}
form = document.getElementById("myForm");
form.addEventListener("submit", getValue, false);
如果第一個表單字段是一個<input>元素，且其 type 特性的值為"hidden"，那么
以上代碼會導致錯誤。另外，如果使用 CSS 的 display 和 visibility 屬性隱藏了該字段，同樣也會
導致錯誤
- 2. 共有的表單字段方法
- 要注意的是，如果第一個表單字段是一個<input>元素，且其 type 特性的值為"hidden"，那么以上代碼會導致錯誤。另外，如果使用 CSS 的 display 和 visibility 屬性隱藏了該字段，同樣也會導致錯誤。
-HTML5 為表單字段新增了一個 autofocus 屬性。在支持這個屬性的瀏覽器中，只要設置這個屬性，不用 JavaScript 就能自動把焦點移動到相應字段。例如：
<input type="text" autofocus>
14.2 文本框腳本
- 在 HTML 中，有兩種方式來表現文本框：一種是使用<input>元素的單行文本框，另一種是使用<textarea>的多行文本框。這兩個控件非常相似，而且多數時候的行為也差不多。不過，它們之間仍 然存在一些重要的區別。
- 要表現文本框，必須將<input>元素的 type 特性設置為"text"。而通過設置 size 特性，可以指定文本框中能夠顯示的字符數。通過 value 特性，可以設置文本框的初始值，而 maxlength 特性則用于指定文本框可以接受的最大字符數。
- 相對而言，<textarea>元素則始終會呈現為一個多行文本框。要指定文本框的大小，可以使用 rows和 cols 特性。其中， rows 特性指定的是文本框的字符行數，而 cols 特性指定的是文本框的字符列數與<input>元素不同， <textarea>的初始值必須要放在<textarea>和</textarea>之間，如下面的例子所示。
- 另一個與<input>的區別在于，不能在 HTML 中給<textarea>指定最大字符數。
- 它們都會將用戶輸入的內容保存在 value 屬性中?？梢酝ㄟ^這個屬性讀取和設置文本框的值。
- 像下面這樣使用 value 屬性讀取或設置文本框的值，不建議使用標準的 DOM 方法。不要使用 setAttribute()設置<input>元素的 value 特性，也不要去修改<textarea>元素的第一個子節點。原因很簡單：對 value 屬性所作的修改，不一定會反映在 DOM 中。因此，在處
理文本框的值時，最好不要使用 DOM 方法。
var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";
-
14.2.1 選擇文本
input text 和 textarea 都支持 select()方法，這個方法用于選擇文本框中的所有文本。在調用 select()方法時，大多數瀏覽器（Opera 除外）都會將焦點設置到文本框中。這個方法不接受參數，可以在任何
時候被調用。 - 在文本框獲得焦點時選擇其所有文本，這是一種非常常見的做法，特別是在文本框包含默認值的時候。
event.target.select() // 選中text框內所有文本；
- 選擇（ select）事件
- 在選擇了文本框中的文本時，就會觸發 select事件。
- 取得選擇的文本
- 該規范采取的辦法是添加兩個屬性： selectionStart 和selectionEnd。這兩個屬性中保存的是基于 0 的數值，表示所選擇
文本的范圍（即文本選區開頭和結尾的偏移量）。 - 用value值的字符串方法subString(textbox.selectionStart, textbox.selectionEnd)
function focusEv(event) {
let obj = event.target
//obj.selectionStart, obj.selectionEnd表示所選擇文本的范圍, 即文本選區開頭和結尾的偏移量
alert(obj.value.substring(obj.selectionStart, obj.selectionEnd))
}
nameInput = document.getElementById("nameInput");
nameInput.addEventListener("select", focusEv, false);
- 3. 選擇部分文本
- 每個文本框都有一個setSelectionRange()方法。這個方法接收兩個參數（要選擇Start的下標 和 要選擇的End的下標）。
textbox.value = "Hello world!"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"
- 14.2.2 過濾輸入
- 綜合運用事件和 DOM 手段，就可以將普通的文本框轉換成能
夠理解用戶輸入數據的功能型控件。
- 屏蔽字符
- 響應向文本框中插入字符操作的是 keypress 事件, 因此，可以通過阻止這個事件的默認行為來屏蔽某類字符。
nameInput.addEventListener("keypress", focusEv, false);
function focusEv(event) {
let obj = event.target;
let value = event.target.value;
codeC = event.charCode; //拿到按鍵的鍵碼
trueC = String.fromCharCode(codeC); //轉換成字符串
if (!/\d/.test(trueC)){ //檢測是否字符串
alert("you pressed \"" + trueC + "\"please press Number")
}
}
- 14.2.3 自動切換焦點
- 在用戶填寫完當前字段時，自動將焦點切換到下一個字段。通常，在自動切換焦點之前，必須知道用戶已經輸入了既定長度的數據（例如電話號碼）。例如，美國的電話號碼通常會分為三部分：區號、局號和另外 4 位數字。
<form>
<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">
</form>
<script>
(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);
})();
</script>
-
14.2.4 HTML5 約束驗證API
為了在將表單提交到服務器之前驗證數據，HTML5 新增了一些功能。就是要在 HTML 標記中為特定的字段指定一些約束，然后瀏覽器才會自動執行表單驗證。
- 必填字段
- required 屬性：
- 任何標注有 required 的字段，在提交表單時都不能空著。這個屬性適用于<input>、 <textarea>和<select>字段；
- required 屬性適用于以下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
- required 屬性：
<input type="text" name="username" required>
- 在JavaScript中驗證是否必填字段：
var isUsernameRequired = document.forms[0].elements["username"].required;
- 另外，使用下面這行代碼可以測試瀏覽器是否支持 required 屬性：
var isRequiredSupported = "required" in document.createElement("input")
- 其他輸入類型
- 檢測瀏覽器是否支持這些新類型
var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");
- 數值范圍
- HTML5 還定義了另外幾個輸入元素。這幾個元素都要求填寫某種基于數字的值： "number"、 "range"、 "datetime"、 "datetime-local"、 "date"、 "month"、 "week"，還有"time"。
- 對所有這些數值類型的輸入元素，可以指定 min 屬性（最小的可能值）、max 屬性（最大的可能值）和 step 屬性（從 min 到 max 的兩個刻度間的差值）。例如，想讓用戶只能輸入 0 到 100 的值，而且這個值必須是 5 的倍數，可以這樣寫代碼：
<input type="number" min="0" max="100" step="5" name="count">
- 輸入模式 re
- HTML5 為文本字段新增了 pattern 屬性。這個屬性的值是一個正則表達式，用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count">
- 檢測有效性
-
checkValidity()
- 使用 checkValidity()方法可以檢測表單中的某個字段是否有效。所有表單字段都有個方法，如果字段的值有效，這個方法返回 true，否則返回 false。字段的值是否有效的判斷依據是本節前面介紹過的那些約束。換句話說，必填字段( required )中如果沒有值就是無效的，而字段中的值與 pattern 屬性不匹配也是無效的。
-
validity
- validity 屬性則會告訴你為什么字段有效或無效。這個對象中包含一系列屬性，每個屬性會返回一個布爾值:
- customError :設置為 true, 如果設置了自定義的 validity 信息。
- patternMismatch: 設置為 true, 如果元素的值不匹配它的模式屬性。
- rangeOverflow: 設置為 true, 如果元素的值大于設置的最大值。
- rangeUnderflow: 設置為 true, 如果元素的值小于它的最小值。
- stepMismatch: 設置為 true, 如果元素的值不是按照規定的 step 屬性設置。
- tooLong: 設置為 true, 如果元素的值超過了 maxLength 屬性設置的長度。
- typeMismatch: 設置為 true, 如果元素的值不是預期相匹配的類型。
- valueMissing: 設置為 true，如果元素 (required 屬性) 沒有值。
- valid: 設置為 true，如果元素的值是合法的。
-
<input id="myInput" type="text" pattern="(\d{1,3}\.){3}\d{1,3}" name="count" required >
<button onclick="match(event)">ismatch</button>
<script>
myInput = document.getElementById("myInput");
function match(event){
if (myInput.checkValidity()){
if(!myInput.validity.patternMismatch){
alert("it's macth" )
}
}
else{
alert("your context is not match！")
}
}
</script>
- 禁用驗證
- 通過設置 novalidate 屬性，可以告訴表單不進行驗證
<form method="post" action="signup.php" novalidate>
<!--這里插入表單元素-->
</form>
- 在 JavaScript 中使用 noValidate 屬性可以取得或設置這個值，如果這個屬性存在，值為 true，如果不存在，值為 false。
document.forms[0].noValidate = true; //禁用驗證
- 如果一個表單中有多個提交按鈕，為了指定點擊某個提交按鈕不必驗證表單，可以在相應的按鈕上添加 formnovalidate 屬性。
<form method="post" action="foo.php">
<!--這里插入表單元素-->
<input type="submit" value="Regular Submit">
<input type="submit" formnovalidate name="btnNoValidate" value="Non-validating Submit">
</form>
14.3 選擇框腳本
- 在 DOM 中，每個<option>元素都有一個 HTMLOptionElement 對象表示。為便于訪問數據，HTMLOptionElement 對象添加了some屬性和方法：
<select id="mySec" type="select-multiple" >
<option class="myOption" value="one">one line</option>
<option class="myOption" value="two">two line</option>
<option class="myOption">three</option>
</select>
如果在select里其中有一個option沒有vlaue屬性 or label屬性，那么在script里調用optionElement.value or label 就return它的text屬性值；
-
選擇框是通過<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 屬性將依據前兩條規則取得第一個選中項的值。
<select id="mySec" type="select-multiple" >
<option class="myOption" value="one">one line</option>
<option class="myOption" value="two">two line</option>
<option label="333" class="myOption">three</option>
</select>
</form>
<script>
var mySec = document.getElementById("mySec");
function selectFunc(event) {
var index = mySec.selectedIndex;
alert( "option's label = " + mySec.options[index].label + "\n " + "option's text = " + mySec.options[index].text);
}
</script>
-
在 DOM 中，每個<option>元素都有一個 HTMLOptionElement 對象表示。為便于訪問數據，HTMLOptionElement 對象添加了下列屬性：
- index：當前選項在 options 集合中的索引。
- label：當前選項的標簽；等價于 HTML 中的 label 特性。
- selected：布爾值，表示當前選項是否被選中。將這個屬性設置為 true 可以選中當前選項。
- text：選項的文本。
- value：選項的值（等價于 HTML 中的 value 特性）
14.3.1 選擇選項
對于只允許選擇一項的選擇框，訪問選中項的最簡單方式，就是使用選擇框的 selectedIndex 屬性;
var mySec = document.getElementById("mySec");
function selectFunc(event) {
var index = event.target.selectedIndex;
alert(event.target.options[index] + " +++ "+ index);
}
selectElement.selectedIndex // return option在options里的offset！
mySec.addEventListener("change", selectFunc)
對于可以選擇多項的選擇框，讀取 selectedIndex 則只會返回選中項中第一項的索引值。
另一種選擇選項的方式，就是取得對某一項的引用，然后將其 selected 屬性設置為 true。例如，下面的代碼會選中選擇框中的第一項：
mySec.options[1].selected = true; // 選中某一項；
-
收集selectbox里選中的option 函數：
- 遍歷selectbox.options
- 檢測 option的selected 是否為true
- 收集到Array里
-
創建option方法
// 創建option
var newOptionObj = document.createElement("option");
var newOptionObj = new Option("Option text", "Option value") // new optionObj arg(text, value)
- 添加到select
// appendChild or select.add
select.add(newOptionObj, beforeThisOption) // (recommend)
// mySec.insertBefore(newOption, mySec.options[0]) 效果同add方法
- 14.3.3 移除選項
- selectbox.removeChild(selectbox.options[0]); //移除第一個選項
- selectbox.remove(0) // selectElement.remove方法 移除第一個選項
- selectbox.options[0] = null; //移除第一個選項
- 14.3.4 移動和重排選項
- 使用 DOM 的 appendChild()方法，就可以將第一個選擇框中的選項直接移動到第二個選擇框中。我們知道，如果為 appendChild()方法傳入一個文檔中已有的元素，那么就會先從該元素的父節點中移除它，再把它添加到指定的位置。
selectElement = document.getElementById("mySelect");
selectElement.insertBefore(selectElement.options[2], selectElement.options[selectElement.options[2].index-1])
14.4 表單序列化
- 隨著 Ajax 的出現，表單序列化已經成為一種常見需求（第 21 章將討論 Ajax）。在 JavaScript 中，可
以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實現對表單的序列化。在編寫代碼之前，有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數據發送給服務器的。- 對表單字段的名稱和值進行 URL 編碼，使用和號（&）分隔。
- 不發送禁用的表單字段。
- 只發送勾選的復選框和單選按鈕。
- 不發送 type 為"reset"和"button"的按鈕。
- 多選選擇框中的每個選中的值單獨一個條目。
- 在單擊提交按鈕提交表單的情況下，也會發送提交按鈕；否則，不發送提交按鈕。也包括 type為"image"的<input>元素。
- <select>元素的值，就是選中的<option>元素的 value 特性的值。如果<option>元素沒有value 特性，則是<option>元素的文本值。
- 在表單序列化過程中，一般不包含任何按鈕字段，因為結果字符串很可能是通過其他方式提交的。
- 除此之外的其他上述規則都應該遵循。
14.5 富文本編輯
- 這一技術的本質，就是在頁面中嵌入一個包含空 HTML 頁面的 iframe。通過設置 designMode 屬性，這個空白的 HTML 頁面可以被編輯，而編輯對象則是該頁面<body>元素的 HTML 代碼。 designMode 屬性有兩個可能的值： "off"（默認值）和"on"。在設置為"on"時，整個文檔都會變得可以編輯（顯示插入符號），然后就可以像使用字處理軟件一樣，通過鍵盤將文本內容加粗、變成斜體，等等。
<iframe id="myframe">
</iframe>
<script>
myframe = document.getElementById("myframe");
myframe.contentDocument.designMode = "on";
</script>
- firfox中要使<iframe>變成可編輯， 必須將代碼放在事件函數中
<body id="myBody" onload="load()">
<iframe id="myframe">
</iframe>
<script>
var myframe = document.getElementById("myframe");
function load(){
myframe.contentDocument.designMode = "on";
};
</script>
</body>
- 14.5.1 使用contenteditable屬性
- 另一種編輯富文本內容的方式是使用名為 contenteditable 的特殊屬性，可以把 contenteditable 屬性應用給頁面中的任何元素，然后用戶立即就可以編輯該元素。
<div class="editable" id="richedit" contenteditable></div>
var div = document.getElementById("richedit");
div.contentEditable = "true";
- 14.5.2 操作富文本
-
document.execCommand()方法：與富文本編輯器交互的主要方式；
- 可以為 document.execCommand()方法傳遞 3 個參數：要執行的命令名稱、表示瀏覽器是否應該為當前命令提供用戶界面的一個布爾值和執行命令必須的一個值（如果不需要值，則傳遞 null）。為了確?？鐬g覽器的兼容性，第二個參數應該始終設置為 false，因為 Firefox 會在該參數為 true 時拋出錯誤。
myframe.contentDocument.execCommand("bold", false, "null");
- 同樣的方法也適用于頁面中 contenteditable 屬性為"true"的區塊，只要把對框架的引用替換
成當前窗口的 document 對象即可。
//轉換粗體文本
document.execCommand("bold", false, null);
- 與命令相關的方法：
- queryCommandEnabled()方法：可以用它來檢測是否可以針對當前選擇的文本，或者當前插入字符所在位置執行某個命令。這個方法接收一個參數，即要檢測的命令。如果當前編輯區域允許執行傳入的命令，這個方法返回 true，否則返回 false。
var result = myframe.contentDocument.queryCommandEnabled("bold")
- queryCommandState()方法: 用于確定是否已將指定命令應用到了選擇的文本。
// 如果此前已經對選擇的文本執行了"bold"命令，那么上面的代碼會返回 true。
//一些功能全面的富文本編輯器，正是利用這個方法來更新粗體、斜體等按鈕的狀態的。
var isBold= myframe.contentDocument.queryCommandState("bold")
- queryCommandValue()方法: 用于取得執行命令時傳入的值（即前面例子中傳給
document.execCommand()的第三個參數）。
// 在對一段文本應用"fontsize"命令時如果傳入了7，
//那么下面的代碼就會返回"7"
var fontSize= myframe.contentDocument.queryCommandValue("fontsize");
14.5.3 富文本選區
14.5.4 表單與富文本
由于富文本編輯是使用 iframe 而非表單控件實現的，因此從技術上說，富文本編輯器并不屬于表
單。換句話說，富文本編輯器中的 HTML 不會被自動提交給服務器，而需要我們手工來提取并提交
HTML。為此，通常可以添加一個隱藏的表單字段，讓它的值等于從 iframe 中提取出的 HTML。具體
來說，就是在提交表單之前，從 iframe 中提取出 HTML，并將其插入到隱藏的字段中。
<iframe id="myframe" name="myframe">
</iframe>
<form id="myForm">
<input id="inputText" type="text" name="myInput">
</form>
<button id="getFrameValue" onclick="showMyInputValue(event)">getFrameValue</button>
<script type="text/javascript">
function showMyInputValue(event) {
let content = myframe.contentDocument.body.innerHTML; //拿到富文本編輯器里的內容
let input = document.getElementById("inputText");
input.value = content; // 放到表單中， 就可以提交表單了；
alert(input.value)
}
function load(event){
myframe.contentDocument.designMode = "on";
}
</script>
