国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS學習筆記（第14章）（表單腳本）

BlackHole1 / 1842人閱讀

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

本章知識架構 

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;
        }
    },
    //訪問剪貼板中的數據，獲取clipboardData對象
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //獲取事件對象
    getEvent: function(event){
        return event ? event : window.event;
    },
    //獲取相關元素
    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;
        }
    
    },
    //獲取事件目標
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //鼠標滾輪事件的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;
        }
    },
    //阻止默認事件
    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、表單的基礎知識

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

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

取得

元素引用的方式：

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

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

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

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

1.1 提交表單

(1)使用或

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

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

解決重復提交表單這一問題的辦法有兩個：

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

(3)在以調用 submit()方法的形式提交表單時，不會觸發 submit 事件，因此要記得在調用此方法之前先驗證表單數據。

//避免多次提交表單
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）與調用 submit()方法不同，調用 reset()方法會像單擊重置按鈕一樣觸發 reset 事件。

1.3 表單字段

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

2.1 選擇文本

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

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

2.1.1 選擇(select)事件

與 select()方法對應的，是一個 select 事件。在選擇了文本框中的文本時，就會觸發 select事件。另外，在調用 select()方法時也會觸發 select 事件。

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

2.1.2 取得選擇的文本

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

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

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

//獲取選中的文本
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)所有文本框都有一個setSelectionRange()方法。這個方法接收兩個參數：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引（類似于 substring()方法的兩個參數）。【IE9、 Firefox、 Safari、 Chrome 和 Opera 】

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

（2）IE 在所有文本框上提供的 createTextRange()方法創建一個范圍，并將其放在恰當的位置上。然后，再使用 moveStart()和 moveEnd()這兩個范圍方法將范圍移動到位。不過，在調用這兩個方法以前，還必須使用 collapse()將范圍折疊到文本框的開始位置。此時，moveStart()將范圍的起點和終點移動到了相同的位置，只要再給 moveEnd()傳入要選擇的字符總數即可。最后一步，就是使用范圍的 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 個字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//選擇第 4 到第 6 個字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"

（3）跨瀏覽器實現選擇部分文本，可以將上述兩個方案組合起來。

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();
}

這個 selectText()函數接收三個參數：要操作的文本框、要選擇文本中第一個字符的索引和要選擇文本中最后一個字符之后的索引。首先，函數測試了文本框是否包含 setSelectionRange()方法。如果有，則使用該方法。否則，檢測文本框是否支持 createTextRange()方法。如果支持，則通過創建范圍來實現選擇。最后一步，就是為文本框設置焦點，以便用戶看到文本框中選擇的文本?？梢韵裣旅孢@樣使用 selectText()方法。

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

2.2.1 屏蔽字符

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

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 個剪貼板事件：

beforecopy：在發生復制操作前觸發。

copy：在發生復制操作時觸發。

beforecut：在發生剪切操作前觸發。

cut：在發生剪切操作時觸發。

beforepaste：在發生粘貼操作前觸發。

paste：在發生粘貼操作時觸發。

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

var EventUtil = {
    //從剪貼板中取得數據
    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 自動切換焦點

使用 JavaScript 可以從多個方面增強表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當前字段時，自動將焦點切換到下一個字段。這種“自動切換焦點”的功能，可以通過下列代碼實現：

(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()函數是實現“自動切換焦點”的關鍵所在。這個函數通過比較用戶輸入的值與文本框的 maxlength 特性，可以確定是否已經達到最大長度。如果這兩個值相等（因為瀏覽器最終會強制它們相等，因此用戶絕不會多輸入字符），則需要查找表單字段集合，直至找到下一個文本框。找到下一個文本框之后，則將焦點切換到該文本框。然后， 我們把這個函數指定為每個文本框的 onkeyup事件處理程序。由于 keyup 事件會在用戶輸入了新字符之后觸發，所以此時是檢測文本框中內容長度的最佳時機。這樣一來，用戶在填寫這個簡單的表單時，就不必再通過按制表鍵切換表單字段和提交表單了。

2.4 HTML5約束驗證API

2.4.1 必填字段

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

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

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

2.4.2 其他輸入類型

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

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

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

2.4.3 數值范圍

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

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

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

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

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

2.4.4 輸入模式

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

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

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

2.4.5 檢測有效性

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

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

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

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

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

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

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

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

tooLong：如果值的長度超過了maxlength 屬性指定的長度，返回true。有的瀏覽器（如Firefox 4）會自動約束字符數量，因此這個值可能永遠都返回false。

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

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

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

2.4.6 禁用驗證

通過設置 novalidate屬性，可以告訴表單不進行驗證。




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

如果一個表單中有多個提交按鈕，為了指定點擊某個提交按鈕不必驗證表單，可以在相應的按鈕上添加 formnovalidate 屬性。


    
    
    



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

選擇框是通過