?JavaScript表單編程

表單是Web上與用戶進(jìn)行交互的主要界面。則我們需要掌握如何訪問(wèn)用戶輸入的表單數(shù)據(jù)，校驗(yàn)用戶輸入的正確性顯得至關(guān)重要。

??對(duì)Form元素進(jìn)行腳本編寫(xiě)

??獲取表單的應(yīng)用

??使用DOM樹(shù)中定位一個(gè)元素的方法——getElementById()方法，并將表單的ID作為方法的參數(shù)；

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

??使用文檔的表單集合，并且通過(guò)表單在forms集合中的位置或者通過(guò)其name屬性；?

var objForm = document.forms[0]; //不用下標(biāo)就是獲得表單集合
var objForm = document.forms["name"];//得到名為name的表單

??獲取表單的字段

每個(gè)表單字段都包含在表單的elements集合中，我們可以通過(guò)使用表單元素的name屬性或者它在集合的位置，訪問(wèn)集合中的不同字段；

??通過(guò)它在集合的位置訪問(wèn)集合中字段；

var temp=oform.elements[0]; //得到表單第一個(gè)字段。

??使用表單元素的name屬性訪問(wèn)集合中字段；

對(duì)該方法傳入name屬性的字符串；

var temp=oform.elements["text"]; //得到名為text1的字段。

每個(gè)表單字段稱為表單本事的一個(gè)屬性，可以直接通過(guò)其名稱訪；

var temp=oform.textbox1; //得到名為textbox1的字段。

如果名稱中間有空格，可以用中括號(hào)代替；

var temp=oform["text box 1"]; //得到名為text box 1的字段。

??表單字段元素對(duì)象

??form表單字段元素對(duì)象的方法

方法	描述
blur()	讓表單字段元素失去焦點(diǎn)，當(dāng)前焦點(diǎn)移到后臺(tái)
focus()	讓表單字段元素獲得焦點(diǎn)
click()	模仿用戶鼠標(biāo)單擊該元素的過(guò)程
setCapture()	在某個(gè)表單字段元素對(duì)象上捕獲當(dāng)前網(wǎng)頁(yè)文檔上的鼠標(biāo)事件
releaseCapture()	取消某個(gè)表單字段元素對(duì)象對(duì)當(dāng)前網(wǎng)頁(yè)文檔鼠標(biāo)事件的捕獲設(shè)置
add()	為列表框（select）增加一個(gè)選擇項(xiàng)(option)

??form表單字段元素對(duì)象的屬性

屬性	描述
defaultValue	設(shè)置或返回表單字段元素的默認(rèn)值（初始值）
disabled	設(shè)置或返回文本輸入框的disabled狀態(tài)；該屬性用于指示一個(gè)表單控件是否可用，一個(gè)disable控件不允許用戶輸入
form	返回表單字段元素所屬于form表單對(duì)象
readOnly	設(shè)置或返回文本輸入框的readonly狀態(tài)
title	設(shè)置或返回表單字段元素title屬性
value	設(shè)置或返回表單字段元素的當(dāng)前取值
checked	設(shè)置或返回單選按鈕、復(fù)選按鈕的選中狀態(tài)

??form表單字段元素對(duì)象的事件

事件	描述
onChange	當(dāng)焦點(diǎn)離開(kāi)文本輸入框且文本輸入框中的值改變時(shí)，或者改變列表框的選擇結(jié)果后，產(chǎn)生該事件
onSelect	當(dāng)單行或多行文本輸入框中的文字被選擇加亮后，產(chǎn)生該事件
onFocus	當(dāng)表單字段獲得焦點(diǎn)時(shí)，產(chǎn)生該事件
onBlur	當(dāng)表單字段元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件

??表單的提交和重置

??使用一個(gè)提交按鈕或者模擬提交按鈕的圖形來(lái)提交/重置表單

<input type="submit" value="Submit"/>　　　　 //submit按鈕提交表單
<input type="image" value="submit.gif"/>　　 //image按鈕提交表單
<button type="submit">Submit</button>　　　  //submit按鈕提交表單
<input type="reset" value="Reset"/>　　　　　//reset按鈕重置表單
<button type="reset">Reset</button>　　　 　 //reset按鈕重置表單 

??使用submit()方法或者reset()方法提交/重置表單

得到表單引用后，直接調(diào)用submit()方法或者reset()方法

oForm.submit(); //oForm表單提交
oForm.reset(); //oForm表單重置

??對(duì)文本框元素進(jìn)行腳本編寫(xiě)

??獲取/更改文本框的值

對(duì)于標(biāo)簽<input/>和<textarea/>都支持同樣的屬性value，以獲取文本框中的文本；使用value屬性返回String類型的文本內(nèi)容；

??選擇文本

兩種類型的文本框都支持select()方法，該方法用于選擇文本框中的所有文本。為使該方法起作用，文本框必須獲得焦點(diǎn)。為確保文本框獲得焦點(diǎn)，我們必須在調(diào)用select()方法之前，調(diào)用另外一個(gè)方法focus();

??文本框事件

兩種文本框都支持blur、focus、change和select事件。

??change事件——在用戶改變文本框的值之后，當(dāng)文本框失去焦點(diǎn)時(shí)觸發(fā)該事件。

（PS：通過(guò)設(shè)置value屬性改變文本框的值時(shí)，不觸發(fā)該事件）

??select事件——在一個(gè)或者多個(gè)字符被選中時(shí)觸發(fā)事件；不管是手動(dòng)選中還是使用select()方法。

??blur事件——當(dāng)文本框失去焦點(diǎn)時(shí)觸發(fā)事件；

（PS：blur事件和change事件都是在文本框失去焦點(diǎn)后觸發(fā)，但是change事件是在文本框的值被改變的情況下才會(huì)觸發(fā)，如果沒(méi)有改變時(shí)只觸發(fā)blur事件；改變時(shí)則先觸發(fā)change事件，隨后再執(zhí)行blur事件）；

??focus事件——當(dāng)文本框獲得焦點(diǎn)時(shí)觸發(fā)事件；

??對(duì)列表框和組合框進(jìn)行腳本編寫(xiě)

??訪問(wèn)選項(xiàng)

HTML?DOM將select元素中的每一項(xiàng)定義到一個(gè)options集合中，該集合中列出select控件中的所有option元素。

屬性	描述
id	設(shè)置或返回選項(xiàng)的?id。
index	返回下拉列表中某個(gè)選項(xiàng)的索引位置。
label	設(shè)置或返回選項(xiàng)的標(biāo)記?（僅用于選項(xiàng)組）。
selected	設(shè)置或返回?selected?屬性的值。
text	設(shè)置或返回某個(gè)選項(xiàng)的純文本值。
value	設(shè)置或返回被送往服務(wù)器的值。

??添加選項(xiàng)

很多時(shí)候，列表框或者組合的選項(xiàng)數(shù)據(jù)，是來(lái)自于后臺(tái)數(shù)據(jù)服務(wù)器或者其它數(shù)據(jù)文件，那么我們就不能在XHTML中指定選項(xiàng)，必須使用JavaScript編碼動(dòng)態(tài)地將數(shù)據(jù)項(xiàng)添加到select元素中，按照以下步驟將選項(xiàng)動(dòng)態(tài)添加到select元素中：

Ⅰ?定義一個(gè)帶三個(gè)參數(shù)的方法，這三個(gè)參數(shù)分別是要添加選項(xiàng)的列表值、要添加的選項(xiàng)的名稱以及要添加的選項(xiàng)的值；

Ⅱ?使用DOM方法創(chuàng)建一個(gè)option元素，然后創(chuàng)建一個(gè)文本節(jié)點(diǎn)分配給選項(xiàng)的名稱；

Ⅲ?設(shè)置option元素的value屬性；

Ⅳ?通過(guò)appendChild()方法，將新選項(xiàng)添加到select元素中;

ListUtil.add = function(oList, sName, sValue){var option = document.creatElement("option");option.appendChild(document.creatTextNode(sName));if(arguments.length == 3){option.setAttribute("value",sValue);}oList.appendChild(potion);
}

??刪除選項(xiàng)

刪除選項(xiàng)的方法有兩種，一種是使用DOM提供的功能，一種是使用HTML?DOM提供的功能

??BOM：使用options集合，將要移除的選項(xiàng)設(shè)置為null；

oList.options[0] = null;

??HTML?DOM:使用select元素的remove()方法，將要?jiǎng)h除的選項(xiàng)的索引傳遞給remove()方法；

oList.remove(0);

??移動(dòng)選項(xiàng)

使用DOM的appendChild()方法，可以從第一個(gè)列表框中把元素移動(dòng)選項(xiàng)到第二個(gè)列表框中。如果我們傳遞一個(gè)文檔中的一個(gè)元素到appendChild()方法，該元素就會(huì)從它的父元素中移除，并且放在指定位置。

??對(duì)復(fù)選框和單選框進(jìn)行腳本編寫(xiě)

屬性/方法	描述
checked	布爾值，指示控件狀態(tài)
defaultChecked	布爾值，指示頁(yè)面加載時(shí)控件是否被選中
click()	模仿按鈕點(diǎn)擊，改變控件狀態(tài)，對(duì)應(yīng)的事件onclick

轉(zhuǎn)載于:https://www.cnblogs.com/HackerBlog/p/6057414.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript总结（七）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。