表單對應(yīng)的是HTMLFormElement類型。有他自己獨有的屬性和方法。
acceptCharset:服務(wù)器能夠處理的字符集。 action:請求的URL elements:表單中所有控件的集合。 length:表單中控件的數(shù)量。 method:HTTP請求類型。 name:表單的名稱。 reset():將所有表單重置為默認值。 submit():提交表單。 target:用于發(fā)送請求和接收響應(yīng)的窗口的名稱。
三種提交方式
<input type="submit" value="submit form"><button type="submit">submit form</button><input type="image" src="graphic.gif">在js中，調(diào)用form的submit()方法也可以提交表單。
重置表單會使所有表單字段恢復(fù)到頁面剛加載完畢時的初始值。 在js中也可以調(diào)用form的reset()方法重置表單。
1.共有的表單字段屬性 除了元素之外。所有表單字段都擁有相同的一組屬性。
disabled:當前字段是否被禁用。 form:指向當前字段所屬表單的指針，只讀。 name：當前字段的名稱。 readOnly:表示當前字段是否只讀。 tabIndex:表示當前字段的切換（tab)序號。 value:當前字段將被提交給服務(wù)器的值。對于文件字段來說，這個屬性是只讀的。包含著文件在計算機中的路徑。
防止表單重復(fù)提交：最常見的解決方案就是在第一次單擊后禁用提交按鈕。只要偵聽submit事件，并在該事件發(fā)生時禁用提交按鈕即可。
EventUtil.addHanler(form,"submit",function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); var btn = target.elements["submit-btn"]; btn.disabled = true;})注意不能通過onclick事件處理程序來實現(xiàn)這個功能。因為不同瀏覽器之間存在“時差”，有的瀏覽器會在觸發(fā)表單的submit事件之前觸發(fā)click事件（意味著提交發(fā)生之前禁用按鈕導(dǎo)致永遠都不會提交表單）。有的則相反。 2. 共有的表單字段方法 focus():得到焦點，激活表單字段。 blur():失去焦點。 HTML5為表單字段新增了一個autonfocus屬性。自動把焦點移到相應(yīng)字段。
<input type="text" autofocus>共有的表單字段事件 blur: change:對于和元素，在他們失去焦點且value值改變時觸發(fā)。對于元素，在其選項改變時觸發(fā)。 focus:IE8及之前不支持這兩個屬性。它有個document.selection對象，其中保存著用戶在整個文檔范圍內(nèi)選擇的文本信息。
if(document.selection){ return document.selection.createRange().text;}選擇部分文本 所有文本框都有一個setSelectionRange()方法，接收兩個參數(shù)：要選擇的第一個字符的索引和最后一個字符的索引。 IE8及其更早版本使用范圍選擇部分文本。function selectText(textbox,startIndex,stopIndex){ if(textbox.setSelectionRange){ textbox.setSelectionRange（startIndex,stopIndex); }else if(textbox.createTextRange){ var range = extbox.createTextRange(); range.collapse(true); range.moveStart("character",startIndex); range.moveEnd("character",stopIndex-startIndex); range.select(); } textbox.focus();}beforecopy: copy:在復(fù)制時觸發(fā) beforecut: cut:在發(fā)生剪切時觸發(fā) beforepaste: paste:在發(fā)生粘貼時觸發(fā)。 這些事件及相關(guān)對象會因瀏覽器而異。 要訪問剪貼板的數(shù)據(jù)可以使用clipboardData對象。在IE中這個對象是window對象的屬性。而在firefox,safari,Chrome中是event對象的屬性，但是只有在處理剪貼板事件期間此對象才有效，這是為了防止度剪貼板的未授權(quán)訪問。這個對象有三個方法： getData():從剪貼板中取得數(shù)據(jù)。接受一個參數(shù)：要取得數(shù)據(jù)的格式。IE有兩種數(shù)據(jù)格式“text”和”URL”.在其它瀏覽器是一種MIME類型。返回布爾值。 setData():接收兩個參數(shù)。第一個是數(shù)據(jù)類型。第二個是放在剪貼板中的文本。返回布爾值。 clearData():清楚數(shù)據(jù)。
var EventUtil = { .... 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); } }}HTMLSelectElement類型提供了下列屬性和方法。
add(newOption,relOption):向控件中插入元素，在relOption之前。 multiple:布爾值，表示是否多項選擇。 options:控件中所有元素的HTMLCollection。 remove(index):移除給定位置的選項。 selectedIndex:基于0的選中項的索引。 size:選擇框中可見的行數(shù)。
每個元素都有一個HTMLOptionElement對象表示。此對象有如下屬性。
index:當前選項在options集合中的索引。 label:當前選項的標簽。 selected:表示當前選項是否被選中。 text:當前選項的文本。 value:選項的值。
新聞熱點
疑難解答
