文本框腳本

• 在HTML 中，有兩種方式來表現(xiàn)文本框：一種是使用<input>元素的單行文本框，另一種是使用<textarea>的多行文本框。

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>

• 將用戶輸入的內(nèi)容保存在value 屬性中?？梢酝ㄟ^這個(gè)屬性讀取和設(shè)置文本框的值。

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";

//事件處理程序，方便后面使用
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;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    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;
        }
    }
};

1、選擇文本

• select()方法，這個(gè)方法用于選擇文本框中的所有文本。這個(gè)方法不接受參數(shù)，可以在任何時(shí)候被調(diào)用。

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

//在文本框獲得焦點(diǎn)時(shí)選擇其所有文本
EventUtil.addHandler(textbox, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});

(1)選擇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)取得選擇的文本

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

//取得用戶在文本框中選擇的文本
function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

//兼容IE8

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

(3)選擇部分文本

• 所有文本框都有一個(gè)setSelectionRange()方法。這個(gè)方法接收兩個(gè)參數(shù)：要選擇的第一個(gè)字符的索引和要選擇的最后一個(gè)字符之后的字符的索引。

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"

//實(shí)現(xiàn)跨瀏覽器編程，兼容IE
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();
}

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、過濾輸入

• 綜合運(yùn)用事件和DOM 手段，就可以將普通的文本框轉(zhuǎn)換成能夠理解用戶輸入數(shù)據(jù)的功能型控件。

(1)屏蔽字符

• 有時(shí)候，我們需要用戶輸入的文本中包含或不包含某些字符。

//只允許用戶輸入數(shù)值,并確保用戶沒有按下Ctrl鍵
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)操作剪切板

• HTML5 規(guī)范中，共6 個(gè)剪貼板事件。

• 要訪問剪貼板中的數(shù)據(jù)，可以使用clipboardData 對(duì)象：在IE 中，這個(gè)對(duì)象是window 對(duì)象的屬性；而在Firefox 4+、Safari 和Chrome 中，這個(gè)對(duì)象是相應(yīng)event 對(duì)象的屬性。
• 為了確保跨瀏覽器兼容性，最好只在發(fā)生剪貼板事件期間使用這個(gè)對(duì)象。
• 這個(gè)clipboardData 對(duì)象有三個(gè)方法：getData()、setData()和clearData()。其中，getData()用于從剪貼板中取得數(shù)據(jù)，它接受一個(gè)參數(shù)，即要取得的數(shù)據(jù)的格式。
• 在IE 中，有兩種數(shù)據(jù)格式："text"和"URL"。在Firefox、Safari和Chrome中，這個(gè)參數(shù)是一種MIME 類型；不過，可以用"text"代表"text/plain"。

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);
        }
    },
    //省略的代碼
};

• 在需要確保粘貼到文本框中的文本中包含某些字符，或者符合某種格式要求時(shí)，能夠訪問剪貼板是非常有用的。

EventUtil.addHandler(textbox, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

3、自動(dòng)切換焦點(diǎn)

• 使用JavaScript 可以從多個(gè)方面增強(qiáng)表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當(dāng)前字段時(shí)，自動(dòng)將焦點(diǎn)切換到下一個(gè)字段。

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

• 為增強(qiáng)易用性，同時(shí)加快數(shù)據(jù)輸入，可以在前一個(gè)文本框中的字符達(dá)到最大數(shù)量后，自動(dòng)將焦點(diǎn)切換到下一個(gè)文本框。

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

4、HTML5 約束驗(yàn)證API

• 為了在將表單提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)，HTML5 新增了一些功能。，即便JavaScript
  被禁用或者由于種種原因未能加載，也可以確?；镜尿?yàn)證。

(1)必填字段

• 任何標(biāo)注有required 的字段，在提交表單時(shí)都不能空著。這個(gè)屬性適用于<input>、<textarea>和<select>字段

<input type="text" name="username" required>

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

//測(cè)試瀏覽器是否支持required 屬性。
var isRequiredSupported = "required" in document.createElement("input");

//檢查字段是否為必填字段
var isUsernameRequired = document.forms[0].elements["username"].required;

(2)其它輸入類型

• HTML5 為<input>元素的type屬性又增加了幾個(gè)值。這些新的類型不僅能反映數(shù)據(jù)類型的信息，而且還能提供一些默認(rèn)的驗(yàn)證功能

<input type="email" name ="email">
<input type="url" name="homepage">

(3)數(shù)值范圍

• HTML5定義的一些輸入元素要求填寫某種基于數(shù)字的值："number"、"range"、"datetime"
  "datetime-local"、"date"、"month"、"week"，還有"time"。
• 對(duì)所有這些數(shù)值類型的輸入元素，可以指定min屬性（最小的可能值）、max屬性（最大的可能值）和step 屬性。

<input type="number" min="0" max="100" step="5" name="count">

(4)輸入模式

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

<input type="text" pattern="\d+" name="count">

//訪問模式
var pattern = document.forms[0].elements["count"].pattern;

//檢測(cè)瀏覽器是否支持pattern 屬性。
var isPatternSupported = "pattern" in document.createElement("input");

(5)檢測(cè)有效性

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

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

• 要檢測(cè)整個(gè)表單是否有效，可以在表單自身調(diào)用checkValidity()方法。如果所有表單字段都有效，這個(gè)方法返回true；即使有一個(gè)字段無效，這個(gè)方法也會(huì)返回false。

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

• validity 屬性則會(huì)告訴你為什么字段有效或無效。這個(gè)對(duì)象中包含一系列屬性，每個(gè)屬性會(huì)返回一個(gè)布爾值。

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch){
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

(6)禁用驗(yàn)證

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

<form method="post" action="signup.php" novalidate>
    <!--這里插入表單元素-->
</form>

• 在JavaScript 中使用noValidate屬性可以取得或設(shè)置這個(gè)值，如果這個(gè)屬性存在，值為true，如果不存在，值為false。

document.forms[0].noValidate = true; //禁用驗(yàn)證

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

<form method="post" action="foo.php">
    <!--這里插入表單元素-->
    <input type="submit" value="Regular Submit">
    <input type="submit" formnovalidate name="btnNoValidate"
    value="Non-validating Submit">
</form>

//禁用驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

選擇框腳本

• 選擇框是通過<select>和<option>元素創(chuàng)建的，除了所有表單字段共有的屬性和方法外，HTMLSelectElement 類型還提供了下列屬性和方法。

• 在DOM 中，每個(gè)<option>元素都有一個(gè)HTMLOptionElement對(duì)象表示。為便于訪問數(shù)據(jù)，HTMLOptionElement 對(duì)象添加了下列屬性。

var selectbox = document.forms[0].elements["location"];

//不推薦，效率低
var text = selectbox.options[0].firstChild.nodeValue; //選項(xiàng)的文本
var value = selectbox.options[0].getAttribute("value"); //選項(xiàng)的值

//推薦
var text = selectbox.options[0].text; //選項(xiàng)的文本
var value = selectbox.options[0].value; //選項(xiàng)的值

1、選擇選項(xiàng)

• 對(duì)于只允許選擇一項(xiàng)的選擇框，訪問選中項(xiàng)的最簡單方式，就是使用選擇框的selectedIndex 屬性。

var selectedOption = selectbox.options[selectbox.selectedIndex];

• 另一種選擇選項(xiàng)的方式，就是取得對(duì)某一項(xiàng)的引用，然后將其selected屬性設(shè)置為true。

selectbox.options[0].selected = true;

• selected 屬性的作用主要是確定用戶選擇了選擇框中的哪一項(xiàng)。要取得所有選中的項(xiàng)，
  可以循環(huán)遍歷選項(xiàng)集合，然后測(cè)試每個(gè)選項(xiàng)的selected 屬性。

function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for (var i=0, len=selectbox.options.length; i < len; i++){
        option = selectbox.options[i];
        if (option.selected){
            result.push(option);
        }
    }
    return result;
}

2、添加選項(xiàng)

• 可以使用JavaScript 動(dòng)態(tài)創(chuàng)建選項(xiàng)，并將它們添加到選擇框中。

//第一種，使用DOM 方法
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

//第二種，使用Option 構(gòu)造函數(shù)來創(chuàng)建新選項(xiàng)
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在IE8 及之前版本中有問題

//第三種，使用選擇框的add()方法，在列表的最后添加一個(gè)選項(xiàng)
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案

3、移除選項(xiàng)

• 與添加選項(xiàng)類似，移除選項(xiàng)的方式也有很多種。

//第一種，使用DOM 的removeChild()方法
selectbox.removeChild(selectbox.options[0]); //移除第一個(gè)選項(xiàng)

//第二種，使用選擇框的remove()方法
selectbox.remove(0); //移除第一個(gè)選項(xiàng)

//將相應(yīng)選項(xiàng)設(shè)置為null
selectbox.options[0] = null; //移除第一個(gè)選項(xiàng)

• 要清除選擇框中所有的項(xiàng)，需要迭代所有選項(xiàng)并逐個(gè)移除它們。

function clearSelectbox(selectbox){
    for(var i=0, len=selectbox.options.length; i < len; i++){
        selectbox.remove(i);
    }
}

4、移動(dòng)和重排選項(xiàng)

• 使用DOM 的appendChild()方法，可以將第一個(gè)選擇框中的選項(xiàng)直接移動(dòng)到第二個(gè)選擇框中。

//selLocations1中減少一項(xiàng)，成為selLocations2的最后一項(xiàng)
var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

• 要將選擇框中的某一項(xiàng)移動(dòng)到特定位置，最合適的DOM 方法就是insertBefore()

//在選擇框中向前移動(dòng)一個(gè)選項(xiàng)的位置
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

好好學(xué)習(xí)