JavaScript--表單處理(27)

一 表單介紹 

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

// HTMLFormElement繼承了HTMLElement;因此它擁有HTML元素具有的默認屬性,別且還獨有自己的屬性和方法;
    HTMLFormElement屬性和方法
屬性或方法                     說明
acceptCharset          服務器能夠處理的字符集;
action 接受請求的URL;  6 elements 表單中所有控件的集合;  7 enctype                請求的編碼類型;
length                 表單中控件的數量;
method                 要發送的HTTP請求類型,通常是'get'或'post';
name 表單的名稱; 11 target                 用於發送請求和接受響應的窗口名稱;
reset()                將所有表單重置;
submit()               提交表單;

1.獲取表單<form>對象;
document.getElementById('myForm');           // 使用ID獲取<form>元素;
document.getElementsByTagName('form')[0];    // 使用獲取form元素集合里的第一個元素;
document.forms[0];                           // 使用forms的數字下標獲取元素;
document.forms['myForm'];                    // 使用forms的名稱下標獲取元素;

2.提交表單
(1).通過事件對象,可以阻止submit的默認行為,submit事件的默認行為就是攜帶數據跳轉到指定頁面;
    addEvent(fm,'submit',function(evt){
 preDef(evt);  5     });

(2).我們可以使用submit()方法來自定義觸發submit事件;也就是說,並不一定非要點擊submit按鈕才能提交;
    if(e.ctrlKey && e.keyCode ==13){
        fm.submit();                           // 判斷按住了ctrl和enter鍵觸發提交;
    }
    // PS:在表單中盡量避免使用name="submit"或id="submit"等命名,這會和submit()方法發生沖突導致無法提交;

(3).重復提交
// 當一條數據提交到服務器的時候會出現延遲等長時間沒反映,導致用戶不停的點擊提交,
// 從而使得重復提交了很多相同的請求,或造成錯誤或寫入數據庫多條相同信息;
    addEvent(fm,'submit',function(evt){        // 模擬服務器延遲;
        preDef(evt);
        setTimeout(function(){                 // 3秒后才處理提交到服務器;
 fm.submit(); 20         },3000);
    });

// 解決重復提交方案
// 第一種:提交之后,立刻禁用點擊按鈕;
    document.getElementById('sub').disabled = true;      // 將按鈕禁用;
// 第二種:提交之后,取消后續的表單提交操作;
    var flag = false;                                    // 設置一個監聽變量;
    if(flag == true)return;                              // 如果存在則返回退出事件;
    flag = true;                                         // 否則確定是第一次,改變監聽變量的值;

3.重置表單
// 用戶點擊重置按鈕時,表單會被初始化;
// 雖然這個按鈕還得以保留,但目前Web已經很少去使用了;因為用戶填好信息后,不小心點擊了重置就會全部清空,用戶體驗極差;
// 有兩種方法調用reset事件:第一個就是直接type="reset"即可;第二個就是使用fm.reset()方法調用;
    <input type="reset" value="重置" />                   // 不需要JS代碼即可實現;
    addEvent(document,'click',function(){
        fm.reset();                                      // 使用JS方法實現重置;
    });

4.表單字段
// 表單處理中,建議使用HTMLDOM,它有自己的elements屬性,該屬性是表單中所有元素的集合;
    fm.elements[0];                                     // 獲取第一個表單字段元素;
    fm.elements['user'];                                // 獲取name值是user的表單字段元素;
    fm.elements.length;                                 // 獲取所有表單字段的數量;

(1).共有的表單字段屬性
// 除了<fieldset>元素之外,所有表單字段都擁有相同的一組屬性;
屬性                     說明
disabled 布爾值,表示當前字段是否被禁用; 11 form             指向當前字段所屬表單的指針,只讀;
name             當前字段的名稱;
readOnly 布爾值,表示當前字段是否只讀; 14 tabIndex         表示當前字段的切換;
type             當前字段的類型;
value 當前字段的值; 17     fm.elements[0].value;                               // 獲取和設置value;
    fm.elements[0].disabled = true;                     // 禁用當前字段;

(2).共有的表單字段方法
方法                     說明
focus()          將焦點定位到表單字段里;
blur()           從元素中將焦點移走;

(3).共有的表單字段事件
事件名                     說明
blur             當字段失去焦點時觸發;
change           對於<input>和<textarea>元素,在改變value並失去焦點時觸發;對於<select>元素,在改變選項時觸發; 29 focus            當前字段獲取焦點時觸發;

// 利用focus事件修改文本框的背景色;
// 利用change事件在用戶輸入非數值字符時再次修改背景色;
    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';        // 選中狀態時文本框的背景是黃色;
        }
    });

    EventUtil.addHandler(textbox,'blur',function(evt){      // 失去焦點事件;
        evt = EventUtil.getEvent(evt);
        var target = EventUtil.getTarget(evt);
        if(/[^\d]/.test(target.value)){                     // 輸入非數值字符時;
            target.style.backgroundColor = 'red';           // 文本框背景變成紅色;
        }else{
            target.style.backgroundColor = '';
        }
    });

    EventUtil.addHandler(textbox,'change',function(evt){    // 改變value值且失去焦點事件;
        evt = EventUtil.getEvent(evt);
        var target = EventUtil.getTarget(evt);
        if(/[^\d]/.test(target.value)){
            target.style.backgroundColor = 'red';           // 文本框變成紅色;
        }else{
            target.style.backgroundColor = '';
        }
    });

二 文本框腳本

// 在HTML中,有兩種方式來表現文本框:

// 一種是單行文本框<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中的屬性,不建議使用標准的DOM的方法getAttribute();
    // 原因是:對value屬性的修改,不一定反映在DOM中;

// defaultValue:得到原本的value值;不會因為值的改變而變化;
    alert(textField.defaultValue);                        // 得到最初設置的value值;

2.選擇文本
// 使用select()方法,可以將文本框里的內容選中,並將焦點設置到文本框中;
    textField.select();                                      // 在文本框獲得焦點時選擇其所有文本;

// 選取部分文本
// 在使用文本框內容的時候,我們有時要直接選定部分文本,這個行為還沒有標准;
// Firefox的解決方案是:setSelectionRange()方法;它接受兩個參數:索引和長度;
    textField.setSelectionRange(0,1);                        // 選擇第一個字符;
    textField.setSelectionRange(0,textField.value.length);   // 選擇全部; 
    // IE8以下不支持這種寫法,可以使用IE的范圍操作代替;
    var range = textField.createTextRange();                 // 創建一個文本范圍對象;
    range.collapse(true);                                    // 將指針移動到起點;
    range.moveStart('character',0);                          // 移動指針,character表示逐字移動;
    range.moveEnd('character',1);                            // 移動終點;
    range.select();                                          // 焦點選定;

// 選擇部分文本兼容函數
    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()方法對應的,是一個select事件,可以選中文本框文本后觸發;
    addEvent(textField,'select',function(){
        alert(this.value);                                // IE事件需要傳遞this才可以這么寫;
    });

// 獲得選擇的文本
// Firefox提供了兩個屬性:selectionStart和selectionEnd;
    addEvent(textField,'select',function(){
        alert(this.value.substring(this.selectionStart,this.selectionEnd));
    });
    // IE8以下,提供了另一個方案:selection對象,屬於document;
    // 這個對象保存着用戶在整個文檔范圍內選擇的文本信息;
    // 兼容函數
    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在觸發select事件的時候,在選擇一個字符后立即觸發,而其他瀏覽器是選擇想要的字符后釋放鼠標鍵時再觸發;
    // 所以使用alert()的話,導致跨瀏覽器的不兼容;
    // 所以我們可以通過將得到的選擇文本賦值給別的對象;
    addEvent(textField,'select',function(){
        // alert(getSelecText(this));                        // 導致用戶行為結果不一致; 
        document.getElementById('box').innerHTML = getSelecText(this);
    })

3.過濾輸入
// 為了使文本框輸入指定的字符,我們必須對輸入進文本框的字符進行驗證;
    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);                            // 條件阻止默認;
        }
    });
    // PS:前半段條件判斷只有數字才可以輸入,導致常規按鍵,比如光標鍵/退格鍵/刪除鍵等無法使用;
    // 部分瀏覽器比如Firefox,需要解放這些鍵,而非字符觸發的編碼均為0;
    // 在Safari3之前的瀏覽器,也會被阻止,而它對應的字符編碼全部為8,所以最后加上charCode>9的判斷;
    // 確保用戶沒有按下ctrl鍵;

// 阻止文本框裁剪/復制和粘貼;
事件名                說明
copy          在發生復制操作時觸發;
cut           在發生裁剪操作時觸發;
paste         在發生粘貼操作時觸發;
beforecopy    在發生復制操作時觸發;
beforecut     在發生裁剪操作時觸發;
beforepaste   在發生粘貼操作時觸發;
// 如果我們想要禁用裁剪/復制/粘貼,那么可以阻止默認行為即可;
    addEvent(areaField,'cut',function(evt){
        preDef(evt);
    });
    addEvent(areaField,'copy',function(evt){
        preDef(evt);
    });
    addEvent(areaField,'paste',function(evt){
        preDef(evt);
    });

// 最后一個影響輸入的因素,就是:輸入法;
// 中文輸入法,它的原理是在輸入法面板上先儲存文本,按下回車就寫入英文文本,按下空格就寫入中文文本;
// 解決方案:通過CSS來禁止調出輸入法;
    style='ime-mode:disabled';                    // CSS直接編寫;
    areaField.style.imeMode='disabled';            // 在JS中設置;
    // PS:Chrome無法禁止輸入法調出,所以,最后使用正則驗證已輸入的文本;
    addEvent(areaField,'keyup',function(evt){
        this.value = this.value.replace(/[^\d]/g,'');    // 把非數字都替換成空;
    });

4.自動切換焦點
// 為了增加表單字段的易用性,很多字段在滿足一定條件時(比如長度),就會自動切換到下一個字段上繼續填寫;
    <input type='text' name='user1' maxlength='1'/>        // 只能寫1個;
    <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);
        // 判斷當前長度是否和指定長度一致;
        if(target.value.length == target.maxLength){
            // 遍歷所有字段;
            for(var i=0; i<fm.elements.length; i++){
                // 找到當前字段;
                if(fm.elements[i]==target){
                    // 就把焦點移入下一個字段;
                    if(fm.elements[i+1]){
                        fm.elements[i+1].focus(); 18                     }
                    // 中途返回;
                    return;
                }
            }
        }
    }

三 選擇框腳本

// 選擇框是通過<select>和<option>元素創建的;
        HTMLSelectElement對象
屬性/方法                 說明
add(new,rel) 插入新元素,並指定位置; 5 multiple            布爾值,是否允許多項選擇;
options             <option>元素的HTMLCollection集合; 7 remove(index)       移除給定位置的選項;
selectedIndex       基於0的選中項的索引,如果沒有選中項,則值為-1; 9 size                選擇框中可見的行數;

// 在DOM中,每個<option>元素都有一個HTMLOptionElement對象,以便訪問數據;
        HTMLOptionElement對象
屬性                    說明 
index 當前選項在options集合中的索引; 5 label               當前選項的標簽;
selected 布爾值,表示當前選項是否被選中; 7 text                選項的文本;
value               選項的值;

    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時,最好使用HTMLDOM,以為瀏覽器兼容性比較好;
    // 如果使用標准DOM,會因為不同的瀏覽器導致不同的結果;
    // PS:當選項沒有value值的時候,IE會返回空字符串,其他瀏覽器會返回text值;

2.選擇選項 
// 對於只能選擇一項的選擇框,使用selectedIndex屬性最為簡單;
    addEvent(city,'change',function(){
        alert(this.selectedIndex);                        // 得到當前選項的索引,從0開始;
        alert(this.options[this.selectedIndex].text);     // 得到當前選項的text值;
        alert(this.options[this.selectedIndex].value);    // 得到當前選項的value值;
    });
    city.selectedIndex = 1;                               // 設置selectedIndex可以定位某個索引;

// 通過option的屬性selected(布爾值),也可以設置定位某個索引,設置為true即可;
    city.options[0].selected = true;                      // 設置第一個索引;

// selected和selectedIndex區別:
// 1.selected是返回的布爾值;所以一般用於判斷上;
// 2.selectedIndex返回的是數值,一般用於設置和獲取;
    addEvent(city,'change',function(){
        if(this.options[2].selected == true){             // 判斷第三個選項是否被選定;
            alert('正確!');
        }
    });

3.添加選項
// 如需要動態的添加選項,我們提供兩種方案:DOM和Option構造函數;
(1).DOM
    var option = document.createElement('option');  5     option.appendChild(document.createTextNode('北京 text'));
    option.setAttribute('value','北京 value');
    city.appendChild(option);  8 
(2).Option構造函數 
    var option = new Option('北京 text','北京 value'); 11     city.appendChild(option);                            // IE出現bug;

(3).使用add()方法來添加選項:
    var option = new Option('北京 text','北京 value');
    city.add(option,0);                                  // 0,表示添加到第一位;
    // PS:在DOM規定,add()中兩個參數是必須的,如果不正確索引,那么第二個參數設置null即可,即默認移入最后一個選項;
    // 但在IE中第二個參數是可選的,所以設置null表示放入不存在的位置,導致失蹤;
    // 為了兼容性,可以傳遞undefined即可兼容;
    city.add(option,null);                               // IE不顯示了;
    city.add(option,undefined);                          // 兼容;

4.移除選項 
// 有三種方式可以移除某一個選項:DOM移除/remove()方法移除和null移除;
    city.removeChild(city.option[0]);                      // DOM移除;
    city.remove(0);                                        // remove()移除,推薦;
    city.options[0] = null;                                // null移除;
    // PS:當第一項移除后,下面的項,往上移,所以不停的移除第一項,即可全部移除;

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

6.排列選項 
// 選擇框提供了一個index屬性,可以得到當前選項的索引值,和selectedIndex的區別是,一個是選擇框對象的調用,一個是選項對象的調用;
    var option1 = city.options[1];
    city.insertBefore(option1,city.options[option1.index-1]);    // 往上移位;

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

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