成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS學(xué)習(xí)筆記（第14章）（表單腳本）

BlackHole1 / 1853人閱讀

摘要：布爾值，表示當(dāng)前字段是否被禁用。指向當(dāng)前字段所屬表單的指針只讀。文本框腳本在中，有兩種方式來表現(xiàn)文本框一種是使用元素的單行文本框，另一種是使用的多行文本框。然后，我們把這個(gè)函數(shù)指定為每個(gè)文本框的事件處理程序。

本章知識架構(gòu) 

var EventUtil = {
    //添加事件處理程序
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    //檢測按鍵button屬性
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4: return 1;
            }
        }
    },
    //獲取字符編碼
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    //訪問剪貼板中的數(shù)據(jù)，獲取clipboardData對象
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //獲取事件對象
    getEvent: function(event){
        return event ? event : window.event;
    },
    //獲取相關(guān)元素
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    
    },
    //獲取事件目標(biāo)
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //鼠標(biāo)滾輪事件的wheelDelta屬性
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    //阻止默認(rèn)事件
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    //移除事件處理程序
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    //阻止冒泡事件
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};
1、表單的基礎(chǔ)知識

JavaScript 中，表單對應(yīng)的則是 HTMLFormElement 類型。 HTMLFormElement 繼承了 HTMLElement，因而與其他 HTML 元素具有相同的默認(rèn)屬性。它自己下列獨(dú)有的屬性和方法。

? acceptCharset：服務(wù)器能夠處理的字符集；等價(jià)于 HTML 中的 accept-charset 特性。
? action：接受請求的 URL；等價(jià)于 HTML 中的 action 特性。
? elements：表單中所有控件的集合（ HTMLCollection）。
? enctype：請求的編碼類型；等價(jià)于 HTML 中的 enctype 特性。
? length：表單中控件的數(shù)量。
? method：要發(fā)送的 HTTP 請求類型，通常是"get"或"post"；等價(jià)于 HTML 的 method 特性。
? name：表單的名稱；等價(jià)于 HTML 的 name 特性。
? reset()：將所有表單域重置為默認(rèn)值。
? submit()：提交表單。
? target：用于發(fā)送請求和接收響應(yīng)的窗口名稱；等價(jià)于 HTML 的 target 特性。

取得

元素引用的方式：

(1)將它看成與其他元素一樣，并為其添加 id 特性，然后再像下面這樣使用 getElementById()方法找到它;

var form = document.getElementById("form1");

(2)通過 document.forms 可以取得頁面中所有的表單。在這個(gè)集合中，可以通過數(shù)值索引或name 值來取得特定的表單;

var firstForm = document.forms[0]; //取得頁面中的第一個(gè)表單
var myForm = document.forms["form2"]; //取得頁面中名稱為"form2"的表單

1.1 提交表單

(1)使用或

(2)在 JavaScript 中，以編程方式調(diào)用 submit()方法也可以提交表單;

var form = document.getElementById("myForm");
//提交表單
form.submit();

解決重復(fù)提交表單這一問題的辦法有兩個(gè)：

在第一次提交表單后就禁用提交按鈕，或者利用 onsubmit 事件處理程序取消后續(xù)的表單提交操作。

(3)在以調(diào)用 submit()方法的形式提交表單時(shí)，不會(huì)觸發(fā) submit 事件，因此要記得在調(diào)用此方法之前先驗(yàn)證表單數(shù)據(jù)。

//避免多次提交表單
EventUtil.addHandler(form, "submit", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    //取得提交按鈕
    var btn = target.elements["submit-btn"];
    //禁用它
    btn.disabled = true;
});
1.2 重置表單

（1）使用 type 特性值為"reset"的或

（2）與提交表單一樣，也可以通過 JavaScript 來重置表單；

var form = document.getElementById("myForm");

（3）與調(diào)用 submit()方法不同，調(diào)用 reset()方法會(huì)像單擊重置按鈕一樣觸發(fā) reset 事件。

1.3 表單字段

可以像訪問頁面中的其他元素一樣，使用原生 DOM 方法訪問表單元素。此外，每個(gè)表單都有elements 屬性，該屬性是表單中所有表單元素（字段）的集合。這個(gè) elements 集合是一個(gè)有序列表，其中包含著表單中的所有字段，例如、 之間。

2.1 選擇文本

上述兩種文本框都支持 select()方法，這個(gè)方法用于選擇文本框中的所有文本。 在調(diào)用 select()方法時(shí)，大多數(shù)瀏覽器（ Opera 除外）都會(huì)將焦點(diǎn)設(shè)置到文本框中。這個(gè)方法不接受參數(shù)，可以在任何時(shí)候被調(diào)用。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

2.1.1 選擇(select)事件

與 select()方法對應(yīng)的，是一個(gè) select 事件。在選擇了文本框中的文本時(shí)，就會(huì)觸發(fā) select事件。另外，在調(diào)用 select()方法時(shí)也會(huì)觸發(fā) select 事件。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
    var alert("Text selected" + textbox.value);
});

2.1.2 取得選擇的文本

(1)采取的辦法是添加兩個(gè)屬性： selectionStart 和 selectionEnd。這兩個(gè)屬性中保存的是基于 0 的數(shù)值，表示所選擇文本的范圍（即文本選區(qū)開頭和結(jié)尾的偏移量）。

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

因 為 substring() 方 法 基 于 字 符 串 的 偏 移 量 執(zhí) 行 操 作 ， 所 以 將 selectionStart 和selectionEnd 直接傳給它就可以取得選中的文本。
(2)IE8 及更早的版本中有一個(gè) document.selection 對象，其中保存著用戶在整個(gè)文檔范圍內(nèi)選擇的文本信息。

//獲取選中的文本
function getSelectedText(textbox){
    if (typeof textbox.selectionStart == "number"){
    return textbox.value.substring(textbox.selectionStart,
    textbox.selectionEnd);
} else if (document.selection){
    return document.selection.createRange().text;
    }
}

2.1.3 選擇部分文本

(1)所有文本框都有一個(gè)setSelectionRange()方法。這個(gè)方法接收兩個(gè)參數(shù)：要選擇的第一個(gè)字符的索引和要選擇的最后一個(gè)字符之后的字符的索引（類似于 substring()方法的兩個(gè)參數(shù)）?！綢E9、 Firefox、 Safari、 Chrome 和 Opera 】

textbox.value = "Hello world!"
//選擇所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個(gè)字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個(gè)字符
textbox.setSelectionRange(4, 7); //"o w"

（2）IE 在所有文本框上提供的 createTextRange()方法創(chuàng)建一個(gè)范圍，并將其放在恰當(dāng)?shù)奈恢蒙?。然后，再使?moveStart()和 moveEnd()這兩個(gè)范圍方法將范圍移動(dòng)到位。不過，在調(diào)用這兩個(gè)方法以前，還必須使用 collapse()將范圍折疊到文本框的開始位置。此時(shí)，moveStart()將范圍的起點(diǎn)和終點(diǎn)移動(dòng)到了相同的位置，只要再給 moveEnd()傳入要選擇的字符總數(shù)即可。最后一步，就是使用范圍的 select()方法選擇文本?！綢E8 及更早版本】

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//選擇所有文本
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length); //"Hello world!"
range.select();
//選擇前 3 個(gè)字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//選擇第 4 到第 6 個(gè)字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"

（3）跨瀏覽器實(shí)現(xiàn)選擇部分文本，可以將上述兩個(gè)方案組合起來。

function selectText(textbox, startIndex, stopIndex){
    if (textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

這個(gè) selectText()函數(shù)接收三個(gè)參數(shù)：要操作的文本框、要選擇文本中第一個(gè)字符的索引和要選擇文本中最后一個(gè)字符之后的索引。首先，函數(shù)測試了文本框是否包含 setSelectionRange()方法。如果有，則使用該方法。否則，檢測文本框是否支持 createTextRange()方法。如果支持，則通過創(chuàng)建范圍來實(shí)現(xiàn)選擇。最后一步，就是為文本框設(shè)置焦點(diǎn)，以便用戶看到文本框中選擇的文本。可以像下面這樣使用 selectText()方法。

textbox.value = "Hello world!"
//選擇所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//選擇前 3 個(gè)字符
selectText(textbox, 0, 3); //"Hel"
//選擇第 4 到第 6 個(gè)字符
selectText(textbox, 4, 7); //"o w
2.2 過濾輸入

2.2.1 屏蔽字符

有時(shí)候，我們需要用戶輸入的文本中包含或不包含某些字符。如果只想屏蔽特定的字符，則需要檢測 keypress 事件對應(yīng)的字符編碼，然后再?zèng)Q定如何響應(yīng)。例如，下列代碼只允許用戶輸入數(shù)值。

EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/d/.test(String.fromCharCode(charCode)) && charCode > 9 &!event.ctrlKey){
        EventUtil.preventDefault(event);
    }
});

2.2.2 操作剪切板

下列就是 6 個(gè)剪貼板事件：

beforecopy：在發(fā)生復(fù)制操作前觸發(fā)。

copy：在發(fā)生復(fù)制操作時(shí)觸發(fā)。

beforecut：在發(fā)生剪切操作前觸發(fā)。

cut：在發(fā)生剪切操作時(shí)觸發(fā)。

beforepaste：在發(fā)生粘貼操作前觸發(fā)。

paste：在發(fā)生粘貼操作時(shí)觸發(fā)。

要訪問剪貼板中的數(shù)據(jù)，可以使用 clipboardData 對象。這個(gè) clipboardData 對象有三個(gè)方法： getData()、 setData()和clearData()。 其中， getData()用于從剪貼板中取得數(shù)據(jù)，它接受一個(gè)參數(shù)，即要取得的數(shù)據(jù)的格式;setData()方法的第一個(gè)參數(shù)也是數(shù)據(jù)類型，第二個(gè)參數(shù)是要放在剪貼板中的文本。

var EventUtil = {
    //從剪貼板中取得數(shù)據(jù)
    getClipboardText: function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //將文本放到剪貼板中
    setClipboardText: function(event, value){
        if (event.clipboardData){
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            return window.clipboardData.setData("text", value);
        }
    },
}
2.3 自動(dòng)切換焦點(diǎn)

使用 JavaScript 可以從多個(gè)方面增強(qiáng)表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當(dāng)前字段時(shí)，自動(dòng)將焦點(diǎn)切換到下一個(gè)字段。這種“自動(dòng)切換焦點(diǎn)”的功能，可以通過下列代碼實(shí)現(xiàn)：

(function(){
    function tabForward(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.value.length == target.maxLength){
            var form = target.form;
            for (var i=0, len=form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    var textbox1 = document.getElementById("txtTel1");
    var textbox2 = document.getElementById("txtTel2");
    var textbox3 = document.getElementById("txtTel3");
    EventUtil.addHandler(textbox1, "keyup", tabForward);
    EventUtil.addHandler(textbox2, "keyup", tabForward);
    EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

開始的 tabForward()函數(shù)是實(shí)現(xiàn)“自動(dòng)切換焦點(diǎn)”的關(guān)鍵所在。這個(gè)函數(shù)通過比較用戶輸入的值與文本框的 maxlength 特性，可以確定是否已經(jīng)達(dá)到最大長度。如果這兩個(gè)值相等（因?yàn)闉g覽器最終會(huì)強(qiáng)制它們相等，因此用戶絕不會(huì)多輸入字符），則需要查找表單字段集合，直至找到下一個(gè)文本框。找到下一個(gè)文本框之后，則將焦點(diǎn)切換到該文本框。然后， 我們把這個(gè)函數(shù)指定為每個(gè)文本框的 onkeyup事件處理程序。由于 keyup 事件會(huì)在用戶輸入了新字符之后觸發(fā)，所以此時(shí)是檢測文本框中內(nèi)容長度的最佳時(shí)機(jī)。這樣一來，用戶在填寫這個(gè)簡單的表單時(shí)，就不必再通過按制表鍵切換表單字段和提交表單了。

2.4 HTML5約束驗(yàn)證API

2.4.1 必填字段

(1)第一種情況是在表單字段中指定了 required 屬性

(2)在 JavaScript 中，通過對應(yīng)的 required 屬性，可以檢查某個(gè)表單字段是否為必填字段。

var isUsernameRequired = document.forms[0].elements["username"].required;
//使用下面這行代碼可以測試瀏覽器是否支持 required 屬性。
var isRequiredSupported = "required" in document.createElement("input");

2.4.2 其他輸入類型

(1)HTML5 為元素的 type 屬性又增加了幾個(gè)值。這些新的類型不僅能反映數(shù)據(jù)類型的信息，而且還能提供一些默認(rèn)的驗(yàn)證功能。其中， "email"和"url"是兩個(gè)得到支持最多的類型.

(2)要檢測瀏覽器是否支持這些新類型，可以在 JavaScript 創(chuàng)建一個(gè)元素，然后將 type 屬性設(shè)置為"email"或"url"，最后再檢測這個(gè)屬性的值。不支持它們的舊版本瀏覽器會(huì)自動(dòng)將未知的值設(shè)置為"text"，而支持的瀏覽器則會(huì)返回正確的值。

var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");

2.4.3 數(shù)值范圍

HTML5 還定義了另外幾個(gè)輸入元素。這幾個(gè)元素都要求填寫某種基于數(shù)字的值： "number"、 "range"、 "datetime"、 "datetime-local"、 "date"、 "month"、 "week"，還有"time"。

對所有這些數(shù)值類型的輸入元素，可以指定 min 屬性（最小的可能值）、 max 屬性（最大的可能值）和 step 屬性（從 min 到 max 的兩個(gè)刻度間的差值）。

//讓用戶只能輸入 0 到 100 的值，而且這個(gè)值必須是 5 的倍數(shù)

以上這些屬性在 JavaScript 中都能通過對應(yīng)的元素訪問（或修改）。此外，還有兩個(gè)方法： stepUp()和 stepDown()，都接收一個(gè)可選的參數(shù)：要在當(dāng)前值基礎(chǔ)上加上或減去的數(shù)值。

input.stepUp(); //加 1
input.stepUp(5); //加 5
input.stepDown(); //減 1
input.stepDown(10); //減 10

2.4.4 輸入模式

HTML5 為文本字段新增了 pattern 屬性。這個(gè)屬性的值是一個(gè)正則表達(dá)式，用于匹配文本框中的值。

//如果只想允許在文本字段中輸入數(shù)值，可以像下面的代碼一樣應(yīng)用約束：

//在 JavaScript 中可以通過 pattern 屬性訪問模式。
var pattern = document.forms[0].elements["count"].pattern;
//使用以下代碼可以檢測瀏覽器是否支持 pattern 屬性。
var isPatternSupported = "pattern" in document.createElement("input");

2.4.5 檢測有效性

使用 checkValidity()方法可以檢測表單中的某個(gè)字段是否有效。所有表單字段都有個(gè)方法，如果字段的值有效，這個(gè)方法返回 true，否則返回 false。

if (document.forms[0].elements[0].checkValidity()){
//字段有效，繼續(xù)
} else {
//字段無效
}

與 checkValidity()方法簡單地告訴你字段是否有效相比， validity 屬性則會(huì)告訴你為什么字段有效或無效。這個(gè)對象中包含一系列屬性，每個(gè)屬性會(huì)返回一個(gè)布爾值。

customError ：如果設(shè)置了 setCustomValidity()，則為 true，否則返回false。

patternMismatch：如果值與指定的pattern 屬性不匹配，返回true。

rangeOverflow：如果值比 max 值大，返回 true。

rangeUnderflow：如果值比 min 值小，返回true。

stepMisMatch：如果 min 和 max 之間的步長值不合理，返回true。

tooLong：如果值的長度超過了maxlength 屬性指定的長度，返回true。有的瀏覽器（如Firefox 4）會(huì)自動(dòng)約束字符數(shù)量，因此這個(gè)值可能永遠(yuǎn)都返回false。

typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。

valid：如果這里的其他屬性都是false，返回 true。 checkValidity()也要求相同的值。

valueMissing：如果標(biāo)注為 required 的字段中沒有值，返回true。

2.4.6 禁用驗(yàn)證

通過設(shè)置 novalidate屬性，可以告訴表單不進(jìn)行驗(yàn)證。




//在 JavaScript 中使用 noValidate 屬性可以取得或設(shè)置這個(gè)值，如果這個(gè)屬性存在，值為 true，如果不存在，值為 false。
document.forms[0].noValidate = true; //禁用驗(yàn)證

如果一個(gè)表單中有多個(gè)提交按鈕，為了指定點(diǎn)擊某個(gè)提交按鈕不必驗(yàn)證表單，可以在相應(yīng)的按鈕上添加 formnovalidate 屬性。


    
    
    



//使用 JavaScript 也可以設(shè)置這個(gè)屬性。
//禁用驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;
3、選擇框腳本

選擇框是通過