一、表單中的基本屬性

1.Form表單其自身的獨(dú)有屬性和方法：(只給出常用的方法與屬性的說明)

acceptCharset action:接受請(qǐng)求的URL；等價(jià)于HTML中的action特性 elements：表單中所有控件的集合，這個(gè)JS用的最多 enctype:請(qǐng)求編碼類型，這個(gè)在上傳文件時(shí)可以用到 length:表單中控件的數(shù)量 method:要發(fā)送HTTP請(qǐng)求的類型：get 或 post name reset() submit() target:用于發(fā)送請(qǐng)求和接收響應(yīng)窗口的名稱

2.除了<fieldset>元素之外，所有表單字段都擁有相同的一組屬性。由于<input>類型可以表示多種表單字段，因此有些屬性只適用于某些字段。如下為共有的屬性：

disabled:布爾值，表示當(dāng)前字段是被禁用的 form：指向當(dāng)前字段所屬表單的指針 name：當(dāng)前字段的名稱 readOnly:布爾值，只讀 tabIndex:表示當(dāng)前字段的切換序號(hào) type：類型 value

二、表單的基本“運(yùn)動(dòng)”的注意點(diǎn)

1.有時(shí)為了避免多次提交相同的表單，比如，買東西時(shí)多次提交相同訂單等。為了避免此等行為。我們可以將提交按鈕的disabled屬性設(shè)置為true 2.以上行為不能通過onclick事件觸發(fā)，來實(shí)現(xiàn)避免多次提交表單這一行為，因?yàn)椴煌瑸g覽器存在“時(shí)差”：有的表單會(huì)在觸發(fā)submit事件之前觸發(fā)click事件，有的則相反，如果前者，則會(huì)先觸發(fā)click事件導(dǎo)致按鈕不能用，而表單卻無(wú)法提交了。

三、表單的一些特殊運(yùn)動(dòng)

HTML中的代碼如下
<form action="" method=""><input type="text" name="name" /><br><br>CheckCodes:<input type="text" name="cc" class="cc"maxlength="5" />-<input type="text" name="cc" class="cc"maxlength="5" />-<input type="text" name="cc" class="cc"maxlength="5" /><br><br><p>PhoneNumber:<input type="text" name="number"/></p><p>SELECT:<input type="text" name="select" value="LX_960106"/></p><input type="image" name="submit" src="2.jpg"> 　 </form>javascript起初對(duì)象代碼如下：
var form = document.forms[0];var name = form.elements["name"]var name2 = form.elements[0];

1.選擇文本

select()方法：這個(gè)方法用于選擇文本框中的所有文本。 如： //選擇文本var form = document.forms[0];var sel = form.elements["select"];sel.addEventListener("dblclick",function(){this.select();alert(this.value.substring(this.selectionStart,this.selectionEnd));},false);
雙擊之后，會(huì)出現(xiàn)如下圖選區(qū)并彈出所選內(nèi)容：

selectionStart與selectionEnd是對(duì)象的兩個(gè)屬性，表示選擇文本的范圍（即文本區(qū)開頭和結(jié)尾的偏移量） setSelectionRange()方法：此方法選擇部分文本，接收兩個(gè)參數(shù)：一個(gè)第一個(gè)字符索引，另一個(gè)是，最后一個(gè)字符之后的字符索引 如： sel.addEventListener("click",function(){this.setSelectionRange(3,7);//選擇的為9601，原文本為L(zhǎng)X_960106},false);

2.操作剪貼板

如下就是六個(gè)剪貼板事件 beforecopy copy beforecut cut beforepaste paste 其意義就如單詞意思 可以使用clipboardData對(duì)象訪問剪貼板中的數(shù)據(jù) 在IE中此為window的對(duì)象；在其他瀏覽器中其為event的對(duì)象 改對(duì)象有三個(gè)方法：getData 與 setData、clearData getData接收一個(gè)參數(shù)，即數(shù)據(jù)類型text 或 URL 如下例子：（當(dāng)paste的數(shù)值不全是數(shù)字時(shí)，則取消默認(rèn)行為，致使不能粘貼成功！） //操做剪貼板number.addEventListener("paste",function(event){var clipboardData = (event.clipboardData||window.clipboardData);var content = clipboardData.getData("text");if(!/^\d*$/.test(content)){//此處為正則表達(dá)式，起到過濾作用alert("aaa");event.preventDefault();}},false);

3.自動(dòng)切換焦點(diǎn)

使用javascript可以從多個(gè)方面增強(qiáng)表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當(dāng)前字段的時(shí)候，自動(dòng)將焦點(diǎn)切換到下一個(gè)字段。為了增強(qiáng)易用性，同時(shí)加快數(shù)據(jù)的輸入，可以在前一個(gè)文本框中的字符達(dá)到最大數(shù)量時(shí)，自動(dòng)將焦點(diǎn)切換到下一個(gè)文本框。 代碼實(shí)現(xiàn)如下：
//自動(dòng)切換焦點(diǎn)var cc = form.elements["cc"];function tabForward(event){var target = event.target;//此處為獲取事件作用的對(duì)象if(target.maxLength==target.value.length){//當(dāng)長(zhǎng)度等于對(duì)打長(zhǎng)度時(shí)for(var i=0;i<cc.length;i++){if(target==cc[i]){if(cc[i+1]){cc[i+1].focus();}}}}}cc[0].addEventListener("keyup",tabForward,false);cc[1].addEventListener("keyup",tabForward,false);cc[2].addEventListener("keyup",tabForward,false); demo如下圖所示

4.表單的過濾

屏蔽字符 響應(yīng)文本框中插入字符的操作時(shí)keypress事件，因此可以通過阻止這個(gè)事件的默認(rèn)行為來屏蔽此類字符。在極端情況下，可以通過代碼，屏蔽所有按鍵操作 如下例子：（字輸入電話號(hào)碼時(shí)，屏蔽所有非數(shù)字字符，通過取消事件的默認(rèn)行為讓其不能正常輸入） //過濾非數(shù)字var number = form.elements["number"];number.addEventListener("keypress",function(event){//alert("aaa");var char = event.charCode;//alert(char);if(!/\d/.test(String.fromCharCode(char))&&char>9&&!event.ctrlKey){event.preventDefault();//char>9是為了不讓輸入shift等鍵，！event.ctrlKey功能相同，都是為了瀏覽器向后兼容//alert("aaa");}},false);

總結(jié)

以上是生活随笔為你收集整理的大话表单脚本的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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