一 表單介紹

在HTML中,表單是由<form>元素來表示的,而在JavaScript中,表單對應(yīng)的則是HTMLFormElement類型;

// HTMLFormElement繼承了HTMLElement;因此它擁有HTML元素具有的默認(rèn)屬性,別且還獨(dú)有自己的屬性和方法;

HTMLFormElement屬性和方法

屬性或方法 說明

acceptCharset 服務(wù)器能夠處理的字符集;

action 接受請求的URL;

elements 表單中所有控件的集合;

enctype 請求的編碼類型;

length 表單中控件的數(shù)量;

method 要發(fā)送的HTTP請求類型,通常是'get'或'post';

name 表單的名稱;

target 用于發(fā)送請求和接受響應(yīng)的窗口名稱;

reset() 將所有表單重置;

submit() 提交表單;

1.獲取表單<form>對象;

document.getElementById('myForm'); // 使用ID獲取<form>元素;

document.getElementsByTagName('form')[0]; // 使用獲取form元素集合里的第一個(gè)元素;

document.forms[0]; // 使用forms的數(shù)字下標(biāo)獲取元素;

document.forms['myForm']; // 使用forms的名稱下標(biāo)獲取元素;

2.提交表單

(1).通過事件對象,可以阻止submit的默認(rèn)行為,submit事件的默認(rèn)行為就是攜帶數(shù)據(jù)跳轉(zhuǎn)到指定頁面;

代碼如下:

addEvent(fm,'submit',function(evt){

preDef(evt);

});

(2).我們可以使用submit()方法來自定義觸發(fā)submit事件;也就是說,并不一定非要點(diǎn)擊submit按鈕才能提交;

代碼如下:

if(e.ctrlKey && e.keyCode ==13){

fm.submit(); // 判斷按住了ctrl和enter鍵觸發(fā)提交;

}

// PS:在表單中盡量避免使用name="submit"或id="submit"等命名,這會和submit()方法發(fā)生沖突導(dǎo)致無法提交;

(3).重復(fù)提交

// 當(dāng)一條數(shù)據(jù)提交到服務(wù)器的時(shí)候會出現(xiàn)延遲等長時(shí)間沒反映,導(dǎo)致用戶不停的點(diǎn)擊提交,

// 從而使得重復(fù)提交了很多相同的請求,或造成錯誤或?qū)懭霐?shù)據(jù)庫多條相同信息;

代碼如下:

addEvent(fm,'submit',function(evt){ // 模擬服務(wù)器延遲;

preDef(evt);

setTimeout(function(){ // 3秒后才處理提交到服務(wù)器;

fm.submit();

},3000);

});

// 解決重復(fù)提交方案

// 第一種:提交之后,立刻禁用點(diǎn)擊按鈕;

document.getElementById('sub').disabled = true; // 將按鈕禁用;

// 第二種:提交之后,取消后續(xù)的表單提交操作;

var flag = false; // 設(shè)置一個(gè)監(jiān)聽變量;

if(flag == true)return; // 如果存在則返回退出事件;

flag = true; // 否則確定是第一次,改變監(jiān)聽變量的值;

3.重置表單

?1234567 // 用戶點(diǎn)擊重置按鈕時(shí),表單會被初始化; // 雖然這個(gè)按鈕還得以保留,但目前Web已經(jīng)很少去使用了;因?yàn)橛脩籼詈眯畔⒑?不小心點(diǎn)擊了重置就會全部清空,用戶體驗(yàn)極差; // 有兩種方法調(diào)用reset事件:第一個(gè)就是直接type="reset"即可;第二個(gè)就是使用fm.reset()方法調(diào)用; <input type="reset" value="重置" /> // 不需要JS代碼即可實(shí)現(xiàn); addEvent(document,'click',function(){ fm.reset(); // 使用JS方法實(shí)現(xiàn)重置; });

4.表單字段

// 表單處理中,建議使用HTMLDOM,它有自己的elements屬性,該屬性是表單中所有元素的集合;

fm.elements[0]; // 獲取第一個(gè)表單字段元素;

fm.elements['user']; // 獲取name值是user的表單字段元素;

fm.elements.length; // 獲取所有表單字段的數(shù)量;

(1).共有的表單字段屬性

// 除了<fieldset>元素之外,所有表單字段都擁有相同的一組屬性;

屬性 說明

disabled 布爾值,表示當(dāng)前字段是否被禁用;

form 指向當(dāng)前字段所屬表單的指針,只讀;

name 當(dāng)前字段的名稱;

readOnly 布爾值,表示當(dāng)前字段是否只讀;

tabIndex 表示當(dāng)前字段的切換;

type 當(dāng)前字段的類型;

value 當(dāng)前字段的值;

fm.elements[0].value; // 獲取和設(shè)置value;

fm.elements[0].disabled = true; // 禁用當(dāng)前字段;

(2).共有的表單字段方法

方法 說明

focus() 將焦點(diǎn)定位到表單字段里;

blur() 從元素中將焦點(diǎn)移走;

(3).共有的表單字段事件

事件名 說明

blur 當(dāng)字段失去焦點(diǎn)時(shí)觸發(fā);

change 對于<input>和<textarea>元素,在改變value并失去焦點(diǎn)時(shí)觸發(fā);對于<select>元素,在改變選項(xiàng)時(shí)觸發(fā);

focus 當(dāng)前字段獲取焦點(diǎn)時(shí)觸發(fā);

// 利用focus事件修改文本框的背景色; // 利用change事件在用戶輸入非數(shù)值字符時(shí)再次修改背景色; var bextbox = document.forms[0].elements[0]; EventUtil.addHandler(textbox,'focus',function(evt){ evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(target.style.backgroundColor != 'red'){ target.style.backgroundColor = 'yellow'; // 選中狀態(tài)時(shí)文本框的背景是黃色; } }); EventUtil.addHandler(textbox,'blur',function(evt){ // 失去焦點(diǎn)事件; evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(/[^\d]/.test(target.value)){ // 輸入非數(shù)值字符時(shí); target.style.backgroundColor = 'red'; // 文本框背景變成紅色; }else{ target.style.backgroundColor = ''; } }); EventUtil.addHandler(textbox,'change',function(evt){ // 改變value值且失去焦點(diǎn)事件; evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(/[^\d]/.test(target.value)){ target.style.backgroundColor = 'red'; // 文本框變成紅色; }else{ target.style.backgroundColor = ''; } });

二 文本框腳本

// 在HTML中,有兩種方式來表現(xiàn)文本框:

// 一種是單行文本框<input type="text">;

// 一種是多行文本框<textarea>;

1.獲取value值

// 雖然<input>在字面上有value值,而<textarea>卻沒有,但可以通過value獲取它們的值;

var textField = fm.elements[0];

var areaField = fm.elements[1];

alert(textField.value+','+areaField.value); // 得到<input>和<textarea>的value值;

// PS:使用表單的value是最推薦的,它是HTMLDOM中的屬性,不建議使用標(biāo)準(zhǔn)的DOM的方法getAttribute();

// 原因是:對value屬性的修改,不一定反映在DOM中;

// defaultValue:得到原本的value值;不會因?yàn)橹档母淖兌兓?

alert(textField.defaultValue); // 得到最初設(shè)置的value值;

2.選擇文本

// 使用select()方法,可以將文本框里的內(nèi)容選中,并將焦點(diǎn)設(shè)置到文本框中; textField.select(); // 在文本框獲得焦點(diǎn)時(shí)選擇其所有文本; // 選取部分文本 // 在使用文本框內(nèi)容的時(shí)候,我們有時(shí)要直接選定部分文本,這個(gè)行為還沒有標(biāo)準(zhǔn); // Firefox的解決方案是:setSelectionRange()方法;它接受兩個(gè)參數(shù):索引和長度; textField.setSelectionRange(0,1); // 選擇第一個(gè)字符; textField.setSelectionRange(0,textField.value.length); // 選擇全部; // IE8以下不支持這種寫法,可以使用IE的范圍操作代替; var range = textField.createTextRange(); // 創(chuàng)建一個(gè)文本范圍對象; range.collapse(true); // 將指針移動到起點(diǎn); range.moveStart('character',0); // 移動指針,character表示逐字移動; range.moveEnd('character',1); // 移動終點(diǎn); range.select(); // 焦點(diǎn)選定; // 選擇部分文本兼容函數(shù) function selectText(text,start,stop){ if(text.setSelectionRange){ text.setSelectionRange(start,stop); text.focus(); }else if(text.createTextRange){ var range = text.createTextRange(); range.collapse(true); range.moveStart('character',start); range.moveEnd('character',sotp-start); range.select(); } } // 與select()方法對應(yīng)的,是一個(gè)select事件,可以選中文本框文本后觸發(fā); addEvent(textField,'select',function(){ alert(this.value); // IE事件需要傳遞this才可以這么寫; });

// 獲得選擇的文本 // Firefox提供了兩個(gè)屬性:selectionStart和selectionEnd; addEvent(textField,'select',function(){ alert(this.value.substring(this.selectionStart,this.selectionEnd)); }); // IE8以下,提供了另一個(gè)方案:selection對象,屬于document; // 這個(gè)對象保存著用戶在整個(gè)文檔范圍內(nèi)選擇的文本信息; // 兼容函數(shù) function getSelecText(text){ if(typeof text.selectioinStart =='number'){ // 非IE; return text.value.substring(text.selectionStart,text.selectionEnd); }else if(document.selection){ // IE; return document.selection.createRange().text; // 獲取IE選擇的文本; } } // PS:存在問題:IE在觸發(fā)select事件的時(shí)候,在選擇一個(gè)字符后立即觸發(fā),而其他瀏覽器是選擇想要的字符后釋放鼠標(biāo)鍵時(shí)再觸發(fā); // 所以使用alert()的話,導(dǎo)致跨瀏覽器的不兼容; // 所以我們可以通過將得到的選擇文本賦值給別的對象; addEvent(textField,'select',function(){ // alert(getSelecText(this)); // 導(dǎo)致用戶行為結(jié)果不一致; document.getElementById('box').innerHTML = getSelecText(this); })

3.過濾輸入

?123456789101112 // 為了使文本框輸入指定的字符,我們必須對輸入進(jìn)文本框的字符進(jìn)行驗(yàn)證; addEvent(areaField,'keypress',function(evt){ var e = evt || window.event; var charCode = getCharCode(evt); // 得到字符編碼; if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){ preDef(evt); // 條件阻止默認(rèn); } }); // PS:前半段條件判斷只有數(shù)字才可以輸入,導(dǎo)致常規(guī)按鍵,比如光標(biāo)鍵/退格鍵/刪除鍵等無法使用; // 部分瀏覽器比如Firefox,需要解放這些鍵,而非字符觸發(fā)的編碼均為0; // 在Safari3之前的瀏覽器,也會被阻止,而它對應(yīng)的字符編碼全部為8,所以最后加上charCode>9的判斷; // 確保用戶沒有按下ctrl鍵;

// 阻止文本框裁剪/復(fù)制和粘貼; 事件名 說明 copy 在發(fā)生復(fù)制操作時(shí)觸發(fā); cut 在發(fā)生裁剪操作時(shí)觸發(fā); paste 在發(fā)生粘貼操作時(shí)觸發(fā); beforecopy 在發(fā)生復(fù)制操作時(shí)觸發(fā); beforecut 在發(fā)生裁剪操作時(shí)觸發(fā); beforepaste 在發(fā)生粘貼操作時(shí)觸發(fā); // 如果我們想要禁用裁剪/復(fù)制/粘貼,那么可以阻止默認(rèn)行為即可; addEvent(areaField,'cut',function(evt){ preDef(evt); }); addEvent(areaField,'copy',function(evt){ preDef(evt); }); addEvent(areaField,'paste',function(evt){ preDef(evt); }); // 最后一個(gè)影響輸入的因素,就是:輸入法; // 中文輸入法,它的原理是在輸入法面板上先儲存文本,按下回車就寫入英文文本,按下空格就寫入中文文本; // 解決方案:通過CSS來禁止調(diào)出輸入法; style='ime-mode:disabled'; // CSS直接編寫; areaField.style.imeMode='disabled'; // 在JS中設(shè)置; // PS:Chrome無法禁止輸入法調(diào)出,所以,最后使用正則驗(yàn)證已輸入的文本; addEvent(areaField,'keyup',function(evt){ this.value = this.value.replace(/[^\d]/g,''); // 把非數(shù)字都替換成空; });

4.自動切換焦點(diǎn)

?1234567891011121314151617181920212223 // 為了增加表單字段的易用性,很多字段在滿足一定條件時(shí)(比如長度),就會自動切換到下一個(gè)字段上繼續(xù)填寫; <input type='text' name='user1' maxlength='1'/> // 只能寫1個(gè); <input type='text' name='user2' maxlength='2'/> <input type='text' name='user3' maxlength='3'/> function tabForward(evt){ var e = evt || window.event; var target = getTarget(evt); // 判斷當(dāng)前長度是否和指定長度一致; if(target.value.length == target.maxLength){ // 遍歷所有字段; for(var i=0; i<fm.elements.length; i++){ // 找到當(dāng)前字段; if(fm.elements[i]==target){ // 就把焦點(diǎn)移入下一個(gè)字段; if(fm.elements[i+1]){ fm.elements[i+1].focus(); } // 中途返回; return; } } } }

三 選擇框腳本

選擇框是通過<select>和<option>元素創(chuàng)建的;

HTMLSelectElement對象

屬性/方法 說明

add(new,rel) 插入新元素,并指定位置;

multiple 布爾值,是否允許多項(xiàng)選擇;

options <option>元素的HTMLCollection集合;

remove(index) 移除給定位置的選項(xiàng);

selectedIndex 基于0的選中項(xiàng)的索引,如果沒有選中項(xiàng),則值為-1;

size 選擇框中可見的行數(shù);

// 在DOM中,每個(gè)<option>元素都有一個(gè)HTMLOptionElement對象,以便訪問數(shù)據(jù);

HTMLOptionElement對象

屬性 說明

index 當(dāng)前選項(xiàng)在options集合中的索引;

label 當(dāng)前選項(xiàng)的標(biāo)簽;

selected 布爾值,表示當(dāng)前選項(xiàng)是否被選中;

text 選項(xiàng)的文本;

value 選項(xiàng)的值;

var city = fm.elements['city']; // HTMLSelectElement; alert(city.options); // HTMLOptionsCollection; alert(city.options[0]); // HTMLOptionElement; alert(city.type); // select-one; // PS:選擇框里的type屬性有可能是:select-one,也有可能是:select-multiple; // 這取決于HTML代碼中有沒有multiple屬性; alert(city.options[0].text); // 上海text,獲取text值; alert(city.options[0].value); // 上海value,獲取value值; // PS:操作select時(shí),最好使用HTMLDOM,以為瀏覽器兼容性比較好; // 如果使用標(biāo)準(zhǔn)DOM,會因?yàn)椴煌臑g覽器導(dǎo)致不同的結(jié)果; // PS:當(dāng)選項(xiàng)沒有value值的時(shí)候,IE會返回空字符串,其他瀏覽器會返回text值;

2.選擇選項(xiàng)

對于只能選擇一項(xiàng)的選擇框,使用selectedIndex屬性最為簡單;

代碼如下:

addEvent(city,'change',function(){

alert(this.selectedIndex); // 得到當(dāng)前選項(xiàng)的索引,從0開始;

alert(this.options[this.selectedIndex].text); // 得到當(dāng)前選項(xiàng)的text值;

alert(this.options[this.selectedIndex].value); // 得到當(dāng)前選項(xiàng)的value值;

});

city.selectedIndex = 1; // 設(shè)置selectedIndex可以定位某個(gè)索引;

通過option的屬性selected(布爾值),也可以設(shè)置定位某個(gè)索引,設(shè)置為true即可;

city.options[0].selected = true; // 設(shè)置第一個(gè)索引;

selected和selectedIndex區(qū)別:

1.selected是返回的布爾值;所以一般用于判斷上;

2.selectedIndex返回的是數(shù)值,一般用于設(shè)置和獲取;

代碼如下:

addEvent(city,'change',function(){

if(this.options[2].selected == true){ // 判斷第三個(gè)選項(xiàng)是否被選定;

alert('正確!');

}

});

3.添加選項(xiàng)

// 如需要動態(tài)的添加選項(xiàng),我們提供兩種方案:DOM和Option構(gòu)造函數(shù);

(1).DOM

var option = document.createElement('option');

option.appendChild(document.createTextNode('北京 text'));

option.setAttribute('value','北京 value');

city.appendChild(option);

(2).Option構(gòu)造函數(shù)

var option = new Option('北京 text','北京 value');

city.appendChild(option); // IE出現(xiàn)bug;

(3).使用add()方法來添加選項(xiàng):

var option = new Option('北京 text','北京 value');

city.add(option,0); // 0,表示添加到第一位;

// PS:在DOM規(guī)定,add()中兩個(gè)參數(shù)是必須的,如果不正確索引,那么第二個(gè)參數(shù)設(shè)置null即可,即默認(rèn)移入最后一個(gè)選項(xiàng);

// 但在IE中第二個(gè)參數(shù)是可選的,所以設(shè)置null表示放入不存在的位置,導(dǎo)致失蹤;

// 為了兼容性,可以傳遞undefined即可兼容;

city.add(option,null); // IE不顯示了;

city.add(option,undefined); // 兼容;

4.移除選項(xiàng)

// 有三種方式可以移除某一個(gè)選項(xiàng):DOM移除/remove()方法移除和null移除; city.removeChild(city.option[0]); // DOM移除; city.remove(0); // remove()移除,推薦; city.options[0] = null; // null移除; // PS:當(dāng)?shù)谝豁?xiàng)移除后,下面的項(xiàng),往上移,所以不停的移除第一項(xiàng),即可全部移除;

5.移動選項(xiàng)

// 如果有兩個(gè)選擇框,把第一個(gè)選擇框里的第一個(gè)選項(xiàng)移到第二個(gè)選擇框里,并且第一個(gè)選擇框里的第一項(xiàng)被移除; var city = fm.elements['city']; // 第一個(gè)選擇框; var info = fm.elements['info']; // 第二個(gè)選擇框; info.appendChild(city.options[0]); // 移動,并在第一個(gè)選擇框中刪除;

6.排列選項(xiàng)

選擇框提供了一個(gè)index屬性,可以得到當(dāng)前選項(xiàng)的索引值,和selectedIndex的區(qū)別是,一個(gè)是選擇框?qū)ο蟮恼{(diào)用,一個(gè)是選項(xiàng)對象的調(diào)用;

代碼如下:

var option1 = city.options[1];

city.insertBefore(option1,city.options[option1.index-1]); // 往上移位;

7.單選按鈕

// 通過checked屬性來獲取單選按鈕的值; for(var i=0; i<fm.sex.length; i++){ // 循環(huán)單選按鈕; if(fm.sex[i].checked == true){ // 遍歷每一個(gè),找出處于選中狀態(tài)的那一個(gè); alert(fm.sex[i].value); // 得到值; } } // PS:除了checked屬性之外,單選按鈕還有一個(gè)defaultChecked按鈕, // 它獲取的是原本的checked按鈕對象,而不會因?yàn)閏hecked的改變而改變; if(fm.sex[i].defaultChecked == true){ alert(fm.sex[i].value); }

8.復(fù)選按鈕

?12345678 // 通過checked屬性來獲取復(fù)選按鈕的值, var love = ''; for(var i=0; i<fm.love.length; i++){ if(fm.love[i].checked == true){ love += fm.love[i].value; } } alert(love);

更多信息請查看IT技術(shù)專欄