第十四章 表單腳本
表單的基礎(chǔ)知識
基礎(chǔ)知識
-
在
javascript中片任，表單對應(yīng)的是HTMLForm-Element類型，HTMLFormElement繼承自HTMLElement蔬胯。在其他元素屬性之外還包含獨(dú)有屬性和方法对供。-
acceptCharset:服務(wù)器能夠處理的字符集；等價于HTML中的accept-charset特性氛濒。 -
action::接收請求的URL产场；等價于HTML中的action特性。 -
elements:表單中所有控制的集合(HTMLCollection)舞竿。 -
enctype:請求的編碼類型京景；等價于HTML中的enctype特性。 -
length:表單中控件的數(shù)量骗奖。 -
method:要發(fā)送HTTP請求類型确徙，等價于HTML中的method特性。 -
name:表單的名稱执桌；等價于HTML的name特性 -
reset():將所有表單域重置為默認(rèn)值鄙皇。 -
submit():提交表單。 -
target:用于發(fā)送請求和接收響應(yīng)的窗口名稱仰挣；等價于HTML的target特性伴逸。
-
-
document.forms:含有頁面所有表單的數(shù)組。-
可以通過索引訪問如果表單含有
name椎木，也可以使用對象取值的形式通過name獲取表單的數(shù)據(jù)违柏。<body> <form name="test1"> <input type="text"> </form> <form name="test2"> <textarea name="" id="" cols="30" rows="10"></textarea> </form> </body> <script> let formDom = document.forms console.log(formDom['test1'] === formDom[0]) // true </script>取值方式
document.forms[index] ||document.forms[form-name]
-
提交表單
-
submit()方法- 將表單數(shù)據(jù)發(fā)送至服務(wù)器
-
<input type='submit'> || <button type='submit'>都可以提交表單博烂，瀏覽器會在將請求發(fā)送之前觸發(fā)submit香椎，所以通過dom元素提交表單我們可以在submit事件中做預(yù)處理。 - 但通過
js中document.forms[0].submit()此時不會觸發(fā)submit事件禽篱，所以我們需要在使用之前做預(yù)處理畜伐。
- 阻止默認(rèn)事件
- 在
submit事件中通過event時間對象可以阻止默認(rèn)行為event.preventDefault()
- 在
重置表單
-
reset()方法- 將該表單所有表單域重置為默認(rèn)值。
- 與
submit類似將input || button元素的type = "reset"后使用躺率。 - 不同點在于不論是
dom元素 || js操作reset()方法都會觸發(fā)reset事件玛界。
表單元素字段
訪問表單中的元素,首先獲取
dom,或可以從document.forms中選取某個表單，接著可以訪問此表單中的elements屬性悼吱，該屬性中包含表單內(nèi)的所有元素慎框。-
共有的表單字段屬性
除了
<fieldset>元素外disabled:布爾值，表示當(dāng)前字段是否被禁用后添。form:指向當(dāng)前字段所屬表單的指針笨枯；只讀。name:當(dāng)前字段的名稱。readOnly:布爾值馅精，表示當(dāng)前字段是否只讀严嗜。tabIndex:表示當(dāng)前字段的切換tab序號。type:當(dāng)前字段類型洲敢，如checkbox/radiovalue:當(dāng)前字段將被提交給服務(wù)器的值漫玄。對文件字段來說，這個屬性是只讀的压彭，包含著文件在計算機(jī)中的路徑睦优。-
避免重復(fù)提交- 可以在一次提交后，給元素設(shè)置disabled屬性壮不。
- 需要注意的是
onclick在點擊事件中如果阻止了默認(rèn)事件刨秆，由于不同瀏覽器的觸發(fā)時差問題，click有可能會在submit事件前觸發(fā)忆畅。這樣將不會在觸發(fā)submit導(dǎo)致提交不成功衡未。
-
共有的表單字段方法
foucs():獲取焦點blur():失去焦點-
H5新增字段autofocus自動獲取焦點<input type="text" autofocus>對于非表單元素，如果將其
tabIndex屬性設(shè)置為-1,然后在調(diào)用focus()方法家凯，也可以讓這些元素獲取焦點缓醋。
-
共有的表單字段事件
-
blur:失去焦點時觸發(fā)。 -
change:對于<input> || <textarea>元素绊诲，在他們失去焦點并且value值改變時觸發(fā)送粱。<select>選項改變時觸發(fā)。 -
focus:獲取焦點時觸發(fā)掂之。
-
文本框腳本
基礎(chǔ)知識
-
<input>-
size:字段控制輸入框顯示多少個字符 -
value:字段設(shè)置初始值 -
maxlength:字段設(shè)置最大字符數(shù)
-
-
<textarea>-
rows:字段指定文本框字符行數(shù)抗俄， -
cols:指定文本框的字符列數(shù) -
初始值:寫在文本框標(biāo)簽中
-
選擇文本
上述兩種文本框都支持
select()方法，用于選擇文本框中的所有文本世舰。-
選擇
select事件- 用戶選中文本动雹，和調(diào)用
select()方法會觸發(fā)select事件。
- 用戶選中文本动雹，和調(diào)用
-
取消選擇文本
H5新增-
selectionStart & selectionEnd表示用戶選擇文本的起始和結(jié)束索引跟压。
-
選擇部分文本
-
H5新增-
setSelectionRange()方法接收兩個參數(shù)胰蝠，起始和結(jié)束索引。 - 在使用
setSelectionRange()方法的時候震蒋，需要獲取焦點茸塞。
-
-
IE8以及更早版本-
createTextRange()方法創(chuàng)建一個范圍，并將其放在恰當(dāng)?shù)奈恢蒙喜槠剩谑褂?code>moveStart()和moveEnd()這兩個范圍方法將范圍移動到位钾虐。在調(diào)用這兩個方法之前，還必須使用collapse()方法將范圍折疊到文本框的開始位置笋庄。此時moveStart()將范圍的起點和終點移動到了相同的位置效扫，只要再給moveEnd()傳入要選擇的字符總數(shù)即可效览。最后一步，就是使用范圍的select()方法選擇文本荡短。
-
-
過濾輸入
通過正則表達(dá)式匹配需要屏蔽的字符丐枉，然后使用
event.preventDefault(event)取消默認(rèn)事件的形式可進(jìn)行屏蔽。-
操作剪貼板
-
H5新增最早有IE支持 -
beforecopy || beforecut || beforepaste針對文本框的上下文菜單（預(yù)期將發(fā)生剪貼板事件）的情況下觸發(fā) -
copy || cut || paste在上下文菜單選擇掘托，或觸發(fā)鍵盤組合按鍵時瘦锹，所有瀏覽器都會觸發(fā)他們。 -
beforecopy:復(fù)制操作前觸發(fā) -
copy:復(fù)制操作時觸發(fā) -
beforecut:剪切操作前觸發(fā) -
cut:剪切操作觸發(fā) -
beforepaste:粘貼操作前觸發(fā) -
paste:粘貼操作觸發(fā) -
clipboardData:IE中存放在window中其他存放在剪切事件對象event中-
getData():獲取剪切板數(shù)據(jù)- 接收一個參數(shù)
MIME(text/plain) || URL
- 接收一個參數(shù)
-
setData():設(shè)置剪切板數(shù)據(jù)- 接收兩個參數(shù)
MIME(text/plain) || URL- 要設(shè)置的數(shù)據(jù)字符串
- 返回值
true || false
- 接收兩個參數(shù)
-
自動切換焦點
- 首先要知道用戶已經(jīng)輸入完畢闪盔，然后拿到下一個表單元素調(diào)用
focus()
HTML5約束驗證API
required:必填字段其他輸入類型:
type=email & type=url-
數(shù)值范圍:
number || range || datetime || datetime-local || date || month || week || time || min || max || setp-
input.setpUp():加法弯院，接收一個參數(shù) 數(shù)值，修改當(dāng)前值泪掀，不傳默認(rèn)+1 -
input.setpDown():減法听绳，接收一個參數(shù) 數(shù)值，修改當(dāng)前值异赫，不傳默認(rèn)-1
-
-
輸入模式
-
H5新增-
pattern:這個屬性值為一個正則表達(dá)式椅挣，進(jìn)行約束輸入內(nèi)容
-
-
-
檢測有效
-
checkValidity():檢查表單中某個元素是否有效 - 返回值
Boolean - 如果需要檢測整個表單
doucment.forms[0].checkValidity()
- 屬性：無效原因
-
customError:如果設(shè)置了setCustomValidity()則返回true -
patternMisMatch:輸入值與pattern的正則表達(dá)式不匹配則返回true -
rangeOverflow:如果值比max大,則返回true -
rangeUnderflow:如果值比min小,則返回true -
stepMisMatch:如果min 和 max之間的步長值不合理，返回true -
toolong:長度超過maxlength返回true -
typeMismatch:不符合mail || url要求的格式塔拳，返回true -
valid:如果其他值都為false鼠证，則返回true -
valueMissing:標(biāo)注為required的值為空，則返回true
-
-
-
禁止校驗
-
novalidate:強(qiáng)制表單不校驗<form mothod="post" action="text.php" novalidate></form>
formnovalidate:指定了屬性的type = "submit"的元素靠抑，阻止觸發(fā)校驗
-
選擇框腳本
基礎(chǔ)知識
- 選擇框時通過
<select>|| <option>元素創(chuàng)建的量九，HTMLSelectElement類型還提供了下列屬性和方法 -
add(newOption, relOption):向控件插入新<option>元素，其位置在相關(guān)項relOption之前 -
multiple:布爾值颂碧，表示是否支持多項選擇;等價于HTML中的multiple特性 -
options:控件中所有<option>元素的HTMLCollection -
remove(index):移除給定位置的選項 -
selectedIndex:基于0的選中項索引荠列，沒有選中項則為-1,對于支持多選的控件，只保存選中項中第一項的索引载城。 -
size:選擇框中可見的行數(shù)肌似。 -
value屬性 規(guī)則如下- 如果沒有選中項，則value為空字符串
- 如果有一個選中項个曙，而且該項的
value特性已經(jīng)在HTML中指定锈嫩，則選擇框的value屬性等于選中項的value特性受楼。即使value特性的值是空字符串垦搬，也同樣遵循此條規(guī)則。 - 如果有一個選中項艳汽，但該項的
value特性在HTML中未指定猴贰，則選擇框的value屬性等于該項的文本。 - 如果有多個選中項河狐，則選擇框的
value屬性將依據(jù)前兩條規(guī)則取得第一個選中項的值米绕。
-
<option>-
HTMLOptionElement對象-
index:當(dāng)前選項在options集合中的索引 -
label:當(dāng)前選項的標(biāo)簽瑟捣；等價于HTML中的label特性 -
selected:布爾值，表示當(dāng)前選項是否被選中栅干。將這個屬性設(shè)置為true,可以選中當(dāng)前選項迈套。 -
text:選項的文本 -
value:選項的值
-
-
change:事件- 選中選項時觸發(fā)，不同于其他表單元素被修改且失去焦點后觸發(fā)
-
選擇選項
獲取某一項的引用碱鳞，然后將其
selected屬性設(shè)置為trueselect['要修改的選擇框dom'].options[索引].selected = true
添加選項
- 通過創(chuàng)建
<option>元素添加至<select>元素中let ops = document.createElement('option')selectDom.appendChild(ops)
- 通過
Option構(gòu)造函數(shù)創(chuàng)建<option>元素let ops = new Option('Option text', 'Option value')selectDom.appendChild(ops)
- 通過
<select>的add()方法添加推薦let ops = new Option('Option text', 'Option value')-
selectDom.add(ops, undefined)- 第二個參數(shù)傳入
undefined兼容所有瀏覽器桑李，并添加至<select>中的末尾
- 第二個參數(shù)傳入
移除選項
- 通過
dom0級移除selectDom.removeChild(selectDom.options[0])
- 通過
<select>的remove()方法移除selectDOm.remove(0)
- 通過將
option對象賦值為null- 在
dom出現(xiàn)之前的使用方式 selectDom.options[0] = null
- 在
移動和重排選項
- 最適合的方法
appendChild || insertBefore - 規(guī)則
- 當(dāng)傳入已存在的元素時，會先從父節(jié)點中移除該元素窿给。在把他添加到指定的位置
- 移動和移除選項會重置每一個選項的
index屬性
表單序列化
基礎(chǔ)知識
- 瀏覽器向服務(wù)器發(fā)送表單數(shù)據(jù)流程
- 對表單字段的名稱和值進(jìn)行
URL編碼贵白，使用和號&分隔 - 不發(fā)送禁用的表單字段
- 只發(fā)送勾選的復(fù)選框和單選按鈕
- 不發(fā)送
type為reset || button的按鈕 - 多選選擇框中的每個選中的值單獨(dú)一個條目
- 在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕崩泡；否則禁荒，不發(fā)送提交按鈕。也包括
type為image的<input>元素 -
<select>元素的值角撞，就是選中的<option>元素的value特性的值呛伴。如果<option>元素沒有value特性，則是<option>元素的文本值谒所。
- 對表單字段的名稱和值進(jìn)行
-
<fieldset>不需要參與序列化磷蜀，而且它也沒有type屬性 -
DOM使用hasAttribute()方法檢測vaule是否存在 -
IE使用specified屬性檢測value是否存在
富文本編輯
基礎(chǔ)知識
- 這一技術(shù)的本質(zhì)，就是在頁面中嵌入一個包含空
HTML頁面的iframe百炬。通過設(shè)置designMode屬性褐隆，這個空白的HTML頁面可以被編輯，而編輯對象則是該頁面<body>元素的HTML代碼剖踊。designMode屬性有兩個可能的值off 默認(rèn)值 || on庶弃。在設(shè)置為on時，整個文檔都會變成可以編輯（顯示插入符號）德澈。- 在頁面完全加載后才能設(shè)置
designMode屬性歇攻。
- 在頁面完全加載后才能設(shè)置
使用contenteditable屬性`
-
可以在元素中直接設(shè)置
<div contenteditable></div> <!-- 可以將任何元素開啟可編輯模式 -->
-
通過
dom操作設(shè)置let div = document.getElementById('editor')div.contenteditable = true
操作富文本
- 富文本主要的交互方式，是使用
document.execCommand()- 傳遞三個參數(shù)
- 要執(zhí)行的命令名稱
- 表示瀏覽器是否應(yīng)該為當(dāng)前命令提供用戶界面的一個布爾值
- 為了兼容瀏覽器此參數(shù)應(yīng)該始終傳入
false
- 為了兼容瀏覽器此參數(shù)應(yīng)該始終傳入
- 執(zhí)行命令必須的一個值梆造，默認(rèn)為
null
- 傳遞三個參數(shù)
富文本選區(qū)
- 此處介紹大量
API以及屬性 詳細(xì)請參照Page439 - 441
表單與富文本
此處介紹大量
API以及屬性 詳細(xì)請參照Page441 - 443-
基礎(chǔ)知識
- 由于富文本不屬于表單字段缴守，所以在提交時應(yīng)該單獨(dú)獲取數(shù)據(jù)
frams[富文本名稱].document.body.innerHTML
