1. 表單基礎(chǔ)知識(shí)：
在HTML中，表單由<form>表示；
在JS中，表單由HTMLFormElement類型表示磺芭，它繼承了HTMLElement。
取得頁(yè)面中的表單：
var form=document.forms;
Paste_Image.png
1.1 提交表單
只要將button或者input標(biāo)簽的type設(shè)置為submit即可提交表單醉箕。
瀏覽器在將請(qǐng)求發(fā)送給服務(wù)器之前會(huì)首先觸發(fā)submit事件钾腺，這樣我們可以根據(jù)用戶輸入的內(nèi)容決定是否發(fā)送這個(gè)表單。
1.2 重置表單
html中：將其type設(shè)置為"reset"
JS中：
var form=document.forms[0];
form.reset();
1.3 表單字段
可以通過(guò)elements屬性訪問(wèn)表單中的字段讥裤。
<form>
<button type="submit" id="button">按鈕1</button>
<input type="submit" value="submit"/>
</form>
var form=document.forms[0];
var button=form.elements[0];
var input=form.elements[1];
也可以根據(jù)name值訪問(wèn)：
form.elements["button"]==button//true
A. 共有的表單屬性：
1. disabled:布爾值放棒，表示是否被禁用。
2. form:指向當(dāng)前的表單
3. name:當(dāng)前字段的名稱
4. readOnly:當(dāng)前字段是否為只讀
5. type:當(dāng)前字段的類型：如radio checkbox等
6. value:當(dāng)前字段被提交給服務(wù)器的值己英。
上述屬性除了form外间螟，都可以通過(guò)JS進(jìn)行修改：
如：在一次單擊后禁用按鈕，以防止用戶多次點(diǎn)擊：
EventUtil.addHandler(button,"click",function (event) {
alert("a");
button.disabled=true;
});
B. 共有的表單字段方法
focus()和blur()
focus()方法將瀏覽器的焦點(diǎn)設(shè)置到表單字段损肛。
JS方法：
var input=form.elements[1];
input.focus();
html方法：利用autofocus屬性
<input type="text" autofocus>
Paste_Image.png
blur()與focus()相反厢破，它為移走焦點(diǎn)。
C. 共有的表單字段事件
1. blur：當(dāng)前字段失去焦點(diǎn)觸發(fā)
2. focus:當(dāng)前字段獲得焦點(diǎn)觸發(fā)
3. change:對(duì)于input和textarea元素治拿，失去焦點(diǎn)并且value值改變時(shí)觸發(fā)摩泪。對(duì)于select元素，選項(xiàng)改變時(shí)觸發(fā)劫谅。
var text=form.elements[2];//textarea元素
EventUtil.addHandler(text,"focus",function (event) {//聚焦后將背景顏色設(shè)置為黃色
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.style.backgroundColor="yellow";
});
EventUtil.addHandler(text,"blur",function (event) {//失焦后如果里面的值為數(shù)字則無(wú)顏色见坑，否則為紅色
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor="red";
}else {
target.style.backgroundColor=" ";
}
});
EventUtil.addHandler(text,"change",function (event) {//里面的值改變時(shí)如果為數(shù)字則無(wú)顏色，否則為紅色
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor="red";
}else{
target.style.backgroundColor="";
}
})
2. 文本框腳本
表示文本框的元素：
input textarea
區(qū)別：
input:
單行文本
可以設(shè)置顯示的字符數(shù)size和最大的接收字符數(shù)maxlength
<input type="text" size="10" maxlength="12">
textarea:
多行文本
可以通過(guò)cols和rows設(shè)置列和行數(shù)捏检。
<textarea cols="5" rows="5">12345</textarea>
改變值:
在改變值時(shí)荞驴，都可以使用element.value=""設(shè)置。
2.1 選擇文本
選中所有文本：select()方法
EventUtil.addHandler(text,"focus",function (event) {//鼠標(biāo)聚焦時(shí)選中所有文本
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.select();
});
Paste_Image.png
A. select事件：
當(dāng)文本被選中時(shí)觸發(fā)：
EventUtil.addHandler(text,"select",function (event) {
console.log(text.value);
});
B. 獲取被選中的文本：
select有兩個(gè)屬性：selectionStart和selectionEnd保存的選中文本的偏移量
EventUtil.addHandler(text,"select",function (event) {
console.log(text.value.substring(text.selectionStart,text.selectionEnd));
});
C. 選擇部分文本：setSelectionRange
text.focus();//使用該方法之前或者之后需要將焦點(diǎn)設(shè)置到文本框未檩。
text.setSelectionRange(2,3);
Paste_Image.png
2.2 過(guò)濾輸入：
利用事件和DOM手段戴尸，將文本框變?yōu)榭梢岳斫庥脩糨斎霐?shù)據(jù)的功能性控件。
A. 屏蔽字符：
如用戶只能輸入數(shù)字：
EventUtil.addHandler(text,"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){//后面兩個(gè)條件為取消一些退格等功能鍵以及復(fù)制粘貼用的ctrl鍵
EventUtil.preventDefault(event);
}
})
B. 操作剪貼板：
剪貼板事件：
beforecopy:復(fù)制操作前觸發(fā)冤狡。
copy:復(fù)制操作時(shí)觸發(fā)。
beforecut:剪切操作前觸發(fā)项棠。
cut:剪切操作時(shí)觸發(fā)悲雳。
beforepaste:粘貼前觸發(fā)
paste:粘貼時(shí)觸發(fā)。
如何訪問(wèn)剪貼板中的數(shù)據(jù)：
clipboardData對(duì)象香追。該對(duì)象三個(gè)方法：getData() setData() clearData()
在EventUtil對(duì)象中加入方法：
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);
}
}
例子：如果是數(shù)值合瓢，則粘貼，否則透典，不粘貼晴楔。
EventUtil.addHandler(textArea,"paste",function (event) {
event=EventUtil.getEvent(event);
var text=EventUtil.getClipboardText(event);
if(!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
})
2.3 . 自動(dòng)切換焦點(diǎn)
當(dāng)文本框中達(dá)到最大輸入字符數(shù)量時(shí)顿苇，自動(dòng)切換到下一個(gè)文本框。
<input type="text" name="tel1" id="textTel1" maxlength="3">
<input type="text" name="tel2" id="textTel2" maxlength="3">
<input type="text" name="tel3" id="textTel3" maxlength="4">
function tabForward(event) {
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.value.length==target.maxLength){
var form=target.form;//切換到當(dāng)前目標(biāo)所在的表單
for(var i=0;i<form.elements.length;i++){//對(duì)該表單內(nèi)的元素進(jìn)行循環(huán)
if(form.elements[i]==target){//找到當(dāng)前事件的元素
if(form.elements[i+1]) {//如果存在下一個(gè)元素税弃，則將下一個(gè)元素獲得焦點(diǎn)纪岁。
form.elements[i+1].focus();
}
return;//如果不存在就停止
}
}
}
}
var text1=document.getElementById("textTel1");
var text2=document.getElementById("textTel2");
var text3=document.getElementById("textTel3");
EventUtil.addHandler(text1,"keyup",tabForward);
EventUtil.addHandler(text2,"keyup",tabForward);
EventUtil.addHandler(text3,"keyup",tabForward);
2.4 HTML5約束驗(yàn)證API
HTML5幫助對(duì)表單進(jìn)行驗(yàn)證。
A. 必填字段：required
<input type="text" maxlength="3" required>
<input type="text" maxlength="3">
<input type="text" maxlength="4">
<button type="submit">提交</button>
Paste_Image.png
B. 其他輸入類型：
其他的type類型：如"url" "email"
<input type="email" required>
<input type="text" >
<input type="text" >
<button type="submit">提交</button>
Paste_Image.png
C. 數(shù)值范圍
type值還有"number" "range" "datatime"等等则果。下面的例子為輸入0-50中的3的倍數(shù)幔翰。
<input type="number" min="0" max="50" step="3">
<input type="text">
<input type="text">
<button type="submit">提交</button>
Paste_Image.png
D. 輸入模式：pattern
利用正則進(jìn)行匹配
<input type="text" >
<input type="text" pattern="\d+">
<input type="text" >
<button type="submit">提交</button>
Paste_Image.png
E. 檢測(cè)有效性
如何檢測(cè)表單是否有效：checkValidity()方法，返回布爾值西壮。
var button=document.getElementsByTagName("button")[0];
EventUtil.addHandler(button,"click",function (event) {
if(document.forms[0].checkValidity()){
//表單有效
}else{
console.log("表單無(wú)效")
}
})
還有一個(gè)屬性：validity可以有更詳細(xì)的信息顯示表單字段的有效性遗增。
F. 禁用驗(yàn)證：
novalidate屬性：表單不需要驗(yàn)證。
HTML方法：
<form novalidate>
</form>
JS方法：
document.forms[0].novalidate=true;
formnovalidate屬性：作用于某個(gè)按鈕款青，當(dāng)點(diǎn)擊該按鈕時(shí)不驗(yàn)證表單做修。
HTML方法：
<form novalidate>
<input type="text" >
<input type="text" pattern="\d+">
<input type="text" >
<button type="submit" formnovalidate>提交</button>
</form>
JS方法：
document.getElementsByTagName("button")[0].formNoValidate=true;
3. 選擇框腳本
選擇框通過(guò)select和option標(biāo)簽組成。
<form>
<select name="location" id="selLocation">
<option value="select1">北京</option>
<option value="select2">上海</option>
<option value="select3">山東</option>
</select>
</form>
HTMLSelectElement類型提供了下列的屬性和方法：
add(newOption,relOption):在relOption之前插入newOption
options:返回所有的option的HTMLCollection
remove(index):移除給定選項(xiàng)
selectIndex:選中項(xiàng)索引
size:選擇框可見(jiàn)行數(shù)抡草。
每個(gè)option都有下列屬性：
index
label
selected:布爾值
text：如上例中的“北京”
value：value值
var selectBox=document.forms[0].elements["location"];
console.log(selectBox.options[0].label)
3.1 選擇選項(xiàng)
如何訪問(wèn)選中項(xiàng)：
var selectBox=document.forms[0].elements["location"];
var selectedOption=selectBox.options[selectBox.selectedIndex];
指定選中哪一項(xiàng)：
selectBox.options[1].selected=true;
3.2 添加選項(xiàng)
方法一：操作DOM
var newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("天津"));
selectBox.appendChild(newOption);
方法二：option構(gòu)造函數(shù)
var newOption=new Option("天津","select4");
selectBox.appendChild(newOption);
方法三：選擇框的add()方法
var newOption=new Option("天津","select4");
selectBox.add(newOption,1)//索引設(shè)為1
3.3 移除選項(xiàng)
方法一：DOM方法
var selectBox=document.forms[0].elements["location"];
selectBox.removeChild(selectBox.options[0]);
方法二：選擇框的remove()方法
var selectBox=document.forms[0].elements["location"];
selectBox.remove(0);
3.3 移動(dòng)和重排選項(xiàng)
利用appendChild屬性將選擇框1中的option移動(dòng)到選擇框2饰及。（appendChild方法傳入一個(gè)文檔已經(jīng)存在的元素會(huì)將該元素從它的父節(jié)點(diǎn)刪除然后再添加）
var select1=document.forms[0].elements["location1"];
var select2=document.forms[0].elements["location2"];
select2.appendChild(select1.options[0])
insertBefore方法：
var select1=document.forms[0].elements["location1"];
var select2=document.forms[0].elements["location2"];
var optionMove=select1.options[0];
select2.insertBefore(optionMove,select2.options[1]);
