一、表單中的基本屬性

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

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

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

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

二、表單的基本“運動”的注意點

1.有時為了避免多次提交相同的表單，比如，買東西時多次提交相同訂單等。為了避免此等行為。我們可以將提交按鈕的disabled屬性設置為true 2.以上行為不能通過onclick事件觸發，來實現避免多次提交表單這一行為，因為不同瀏覽器存在“時差”：有的表單會在觸發submit事件之前觸發click事件，有的則相反，如果前者，則會先觸發click事件導致按鈕不能用，而表單卻無法提交了。

三、表單的一些特殊運動

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起初對象代碼如下：
var form = document.forms[0];var name = form.elements["name"]var name2 = form.elements[0];

1.選擇文本

select()方法：這個方法用于選擇文本框中的所有文本。 如： //選擇文本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);
雙擊之后，會出現如下圖選區并彈出所選內容：

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

2.操作剪貼板

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

3.自動切換焦點

使用javascript可以從多個方面增強表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當前字段的時候，自動將焦點切換到下一個字段。為了增強易用性，同時加快數據的輸入，可以在前一個文本框中的字符達到最大數量時，自動將焦點切換到下一個文本框。 代碼實現如下：
//自動切換焦點var cc = form.elements["cc"];function tabForward(event){var target = event.target;//此處為獲取事件作用的對象if(target.maxLength==target.value.length){//當長度等于對打長度時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.表單的過濾

屏蔽字符 響應文本框中插入字符的操作時keypress事件，因此可以通過阻止這個事件的默認行為來屏蔽此類字符。在極端情況下，可以通過代碼，屏蔽所有按鍵操作 如下例子：（字輸入電話號碼時，屏蔽所有非數字字符，通過取消事件的默認行為讓其不能正常輸入） //過濾非數字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);

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。