js高級程序設計筆記9--表單

2024-04-27 15:09:21

字體：大中小

來源：轉載

供稿：網友

表單的基本知識

表單對應的是HTMLFormElement類型。有他自己獨有的屬性和方法。

acceptCharset:服務器能夠處理的字符集。 action:請求的URL elements:表單中所有控件的集合。 length:表單中控件的數量。 method:HTTP請求類型。 name:表單的名稱。 reset():將所有表單重置為默認值。 submit():提交表單。 target:用于發送請求和接收響應的窗口的名稱。

提交表單

三種提交方式

<input type="submit" value="submit form"><button type="submit">submit form</button><input type="image" src="graphic.gif">

在js中，調用form的submit()方法也可以提交表單。

重置表單

<input type="reset" value="reset form"><button type="reset">reset form</button>

重置表單會使所有表單字段恢復到頁面剛加載完畢時的初始值。在js中也可以調用form的reset()方法重置表單。

表單字段

1.共有的表單字段屬性除了元素之外。所有表單字段都擁有相同的一組屬性。

disabled:當前字段是否被禁用。 form:指向當前字段所屬表單的指針，只讀。 name：當前字段的名稱。 readOnly:表示當前字段是否只讀。 tabIndex:表示當前字段的切換（tab)序號。 value:當前字段將被提交給服務器的值。對于文件字段來說，這個屬性是只讀的。包含著文件在計算機中的路徑。

防止表單重復提交：最常見的解決方案就是在第一次單擊后禁用提交按鈕。只要偵聽submit事件，并在該事件發生時禁用提交按鈕即可。

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事件處理程序來實現這個功能。因為不同瀏覽器之間存在“時差”，有的瀏覽器會在觸發表單的submit事件之前觸發click事件（意味著提交發生之前禁用按鈕導致永遠都不會提交表單）。有的則相反。 2. 共有的表單字段方法 focus():得到焦點，激活表單字段。 blur():失去焦點。 HTML5為表單字段新增了一個autonfocus屬性。自動把焦點移到相應字段。

<input type="text" autofocus>共有的表單字段事件 blur: change:對于和元素，在他們失去焦點且value值改變時觸發。對于元素，在其選項改變時觸發。 focus:

文本框腳本

//能夠顯示25個字符，但輸入不能超過50個字符<input type="text" size="25" maxlength="50" value="initial value">//字符行數為25，字符列數為5，初始值必須在<textarea>之間，不能給<textarea>指定最大字符數<textarea rows="25" cols="5">initial value</textarea>選擇文本：這兩種文本框都支持select()方法，用于選擇文本框中的所有文本。 select事件：在選擇了文本框的文本時（即使只有一個字母）就會觸發select事件。取得選擇的文本：HTML5通過兩個屬性：selectionStart和selectionEnd。（即文本選取開頭和結尾的偏移量).function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);}

IE8及之前不支持這兩個屬性。它有個document.selection對象，其中保存著用戶在整個文檔范圍內選擇的文本信息。

if(document.selection){ return document.selection.createRange().text;}選擇部分文本所有文本框都有一個setSelectionRange()方法，接收兩個參數：要選擇的第一個字符的索引和最后一個字符的索引。 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();}

過濾輸入

屏蔽字符響應文本框中插入字符操作的是keyPRess事件。因此可以通過阻止這個事件的默認行為來屏蔽此類字符。但有些瀏覽器也會對其它鍵觸發此事件。Firefox和Sarari(3.1版本之前)會對上鍵，下鍵，退格鍵和刪除鍵觸發keypress事件。在firefox中，所有由非字符鍵觸發的keypress事件對應的字符編碼為0，safari對應的字符編碼為8.還要確保用戶沒有按下Ctrl鍵（復制粘貼需要）例子：只允許輸入數字EventUtil.addHandler(textbox,"keypress",function(event)){ event = EventUtil.getEvent(event); var target = EventUtil.getTartget(event); var charCode = EventUtil.getCharCode(event); if(!//d/.text(String.fromCharCode(charCode)) && charCode>9 && !event.ctrlKey){ EventUtil.preventDefault(event); }}

操作剪貼板剪貼板事件：

beforecopy: copy:在復制時觸發 beforecut: cut:在發生剪切時觸發 beforepaste: paste:在發生粘貼時觸發。這些事件及相關對象會因瀏覽器而異。要訪問剪貼板的數據可以使用clipboardData對象。在IE中這個對象是window對象的屬性。而在firefox,safari,Chrome中是event對象的屬性，但是只有在處理剪貼板事件期間此對象才有效，這是為了防止度剪貼板的未授權訪問。這個對象有三個方法： getData():從剪貼板中取得數據。接受一個參數：要取得數據的格式。IE有兩種數據格式“text”和”URL”.在其它瀏覽器是一種MIME類型。返回布爾值。 setData():接收兩個參數。第一個是數據類型。第二個是放在剪貼板中的文本。返回布爾值。 clearData():清楚數據。

選擇框腳本

HTMLSelectElement類型提供了下列屬性和方法。

add(newOption,relOption):向控件中插入元素，在relOption之前。 multiple:布爾值，表示是否多項選擇。 options:控件中所有元素的HTMLCollection。 remove(index):移除給定位置的選項。 selectedIndex:基于0的選中項的索引。 size:選擇框中可見的行數。

每個元素都有一個HTMLOptionElement對象表示。此對象有如下屬性。

index:當前選項在options集合中的索引。 label:當前選項的標簽。 selected:表示當前選項是否被選中。 text:當前選項的文本。 value:選項的值。

添加選項

//使用DOM方式var newOption = document.createElement("option");newOption.appendChild(document.createTextNode("option text"));newOption.setAttribute("value","option value");selectbox.appendChild(newOption);//使用OPtion構造函數var newOption = new Option("option text","option value");selectbox.appendChild(newOption);//selectbox.add(newOption,undefined);

上一篇：Bootstrap學習筆記（五）菜單、按鈕及導航

下一篇：vue2.0+bootstrap制作購物車及地址選擇頁原型