摘要：屬性可以設(shè)置文本框的初始值。特性則是用于指定文本框內(nèi)可以接受的最大字符數(shù)。與這個(gè)方法對(duì)應(yīng)的事件，在選擇了文本框中的文本時(shí)事件觸發(fā)。如阻止用戶選擇要調(diào)用之前或之后立即將焦點(diǎn)設(shè)置到文本框。

在HTML中，有兩種方式來(lái)表現(xiàn)文本框：

一種是使用input元素的單行文本，另一種是使用textarea的多行文本框。

使用input方式，必須添加type，設(shè)置為“text”。

size特性，可以指定文本框內(nèi)能夠顯示的字符數(shù)。

value屬性可以設(shè)置文本框的初始值。

maxlength特性則是用于指定文本框內(nèi)可以接受的最大字符數(shù)。

textarea的初始值則必須放在開(kāi)始和結(jié)束標(biāo)簽之內(nèi)。

cols是文本框字符行數(shù)；

rows是文本框字符列數(shù)；

另外，不能在HTML中給textarea指定最大字符數(shù)；

上述兩種文本框都支持

select()方法，這個(gè)方法主要用于選擇文本框中的所有文本。不接受任何參數(shù)。

與這個(gè)方法對(duì)應(yīng)的select事件，在選擇了文本框中的文本時(shí)事件觸發(fā)。

下面的代碼是只要文本框獲得焦點(diǎn)，就會(huì)選擇全部的文本：

var textBox = document.getElementById("myForm").elements["firstName"];
//設(shè)置默認(rèn)值
textBox.value = "input your firstName";
//設(shè)置事件
textBox.addEventListener("focus", function () {
    event.target.select();
});

何時(shí)觸發(fā)該事件：

一般情況下只有用戶選擇了文本（而且要釋放鼠標(biāo)），才會(huì)觸發(fā)select事件；

IE8及更早版本中，只要用戶選擇了一個(gè)字母（不必釋放鼠標(biāo)），就會(huì)觸發(fā)select事件；

在調(diào)用select()方法時(shí)也會(huì)觸發(fā)；

如：

var textBox = document.getElementById("myForm").elements["firstName"];
//設(shè)置默認(rèn)值
textBox.value = "input your firstName";
//設(shè)置事件
textBox.addEventListener("select", function () {
    console.log("selected");
});

利用兩個(gè)屬性：

selectionStart

selectionEnd

這兩個(gè)屬性保存的是基于0的數(shù)值，表示所選擇文本的范圍（偏移量）。因此要取得用戶選擇的文本框中的文本，可以使用如下代碼：

var textBox = document.getElementById("myForm").elements["firstName"];
//設(shè)置默認(rèn)值
textBox.value = "input your firstName";
//設(shè)置事件
textBox.addEventListener("select", function () {
    var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
    console.log(selected); 
});

另外，也可以用該屬性來(lái)設(shè)置當(dāng)獲得焦點(diǎn)的時(shí)候默認(rèn)全選的狀態(tài)：

textBox.addEventListener("focus", function () {
    textBox.selectionStart = "0";
    textBox.selectionEnd = textBox.value.length;
});

或者：

textBox.addEventListener("focus", function () {
    textBox.blur();
});

但是，使用selectionStart/End屬性時(shí)，IE8不支持，但支持另一個(gè)名為

document.selection對(duì)象，該對(duì)象保存著用戶在整個(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;
    }
}

選擇部分文本的方法是:

setSelectionRange()方法。接收兩個(gè)參數(shù)：要選擇第一個(gè)字符的索引和最后一個(gè)字符的索引。

如阻止用戶選擇：

textBox.addEventListener("focus", function () {
    textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
    textBox.setSelectionRange(0,0);
});

要調(diào)用setSelectionRange()之前或之后立即將焦點(diǎn)設(shè)置到文本框。而IE中使用的方式是適用范圍來(lái)解決文本的問(wèn)題：

var range = textBox.createTextRange();
range.collapse(true); //范圍折疊到開(kāi)頭
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();

兼容版本：比較常用

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange()) {
        var range = textbox.createTextRange();
        range.collapse(true); //范圍折疊到開(kāi)頭
        range.moveStart("Character", startIndex);
        range.moveEnd("Character", stopIndex);
        range.select();
    };
}

下面的代碼僅允許輸入數(shù)字：

var textBox = document.getElementById("myForm").elements["firstName"];
textBox.autofocus = true;
textBox.addEventListener("keypress", function () {
    if (!/d/.test(String.fromCharCode(event.charCode))) { //僅輸入數(shù)字
        event.preventDefault();
    };
});

但是部分瀏覽器會(huì)對(duì)向上、下鍵、退格鍵觸發(fā)keypress事件，所以需要對(duì)這些常用的操作鍵取消禁止，只要不屏蔽那些字符編碼小于10的鍵即可：

textBox.addEventListener("keypress", function () {
    if (!/d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { //僅輸入數(shù)字
        event.preventDefault();
    };
});

以下是6個(gè)剪貼板事件

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

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

beforecut：在發(fā)生剪貼前操作

cut：在發(fā)生加貼時(shí)操作

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

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

如設(shè)置禁止拷貝：

//拷貝之前提示禁止拷貝
textBox.addEventListener("beforecopy", function() {
    textBox.value = "do not copy";
});
//拷貝時(shí)禁止拷貝
textBox.addEventListener("copy", function() {
    event.preventDefault();
});

要訪問(wèn)剪貼板中的數(shù)據(jù)，可以使用clipboardData對(duì)象，在IE中，這個(gè)對(duì)象是window對(duì)象的屬性，在friefox，safari和chrome，這個(gè)對(duì)象是相應(yīng)event對(duì)象的屬性；在IE中可以隨時(shí)訪問(wèn)該對(duì)象；但在其他瀏覽器中只有在處理剪貼板事件期間才有效。

這個(gè)clipboardData對(duì)象有三個(gè)方法：

getData()

setData()

clearData()

getData()接收一個(gè)參數(shù)，即要取得數(shù)據(jù)的格式（IE中有兩種數(shù)據(jù)格式：text和URL；在其他瀏覽器中這個(gè)參數(shù)是一種MIME類型；不過(guò)可以用text代替text/plain）。

setData()接收兩個(gè)參數(shù)，即數(shù)據(jù)類型和要放在剪貼板中的文本。（第一個(gè)參數(shù)中，IE支持text和URL；第二個(gè)參數(shù)中chrome和safari不支持text類型）;這兩個(gè)瀏覽器在成功將文本放到剪貼板中后，都會(huì)返回true；否則，返回false：

function getClipboardText(event) {
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}

function setClipboardText(event, value) {
    if (event.clipboardData) {
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData) {
        return window.clipboardData.setData("text", value);
    }
}

目前瀏覽器逐漸收緊對(duì)訪問(wèn)剪貼板的操作。

理論上就是在前一個(gè)文本框中的字符打到最大數(shù)量后，自動(dòng)將焦點(diǎn)切換到下一個(gè)文本框：

DOM:

js:

var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");

textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);

function tabForward() {
    var target = event.target;
    //當(dāng)value長(zhǎng)度等于最大值的時(shí)候
    if (target.value.length == target.maxLength) {
        var form = target.form;
        //遍歷所在的form表單中的元素
        for (var i = 0, len = form.elements.length; i < len; i++) {
            //如果該元素是目標(biāo)元素
            if (form.elements[i] == target) {
                //并且該元素的下一個(gè)元素為true 其他條件
                if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) {
                    //則下個(gè)元素獲得焦點(diǎn)
                    form.elements[i + 1].focus();
                }
            }
        };
    }
}

在必填字段中添加屬性required。它適用于input,textarea,select字段。使用下面的代碼可以檢測(cè)瀏覽器是否支持required屬性：

var isRequiredSupported="required" in document.createElement("input");

input的type屬性增加了“email”和“url”；各瀏覽器也都為它們?cè)黾恿硕ㄖ频尿?yàn)證機(jī)制：

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

除了“email”和“URL”，HTML5還定義了另外幾個(gè)輸入元素。這幾個(gè)元素都要求填寫基于數(shù)字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前瀏覽器對(duì)這些類型支持并不好，如果真想使用的話要小心。

對(duì)這事數(shù)值類型的輸入元素可以指定min屬性，max屬性，step屬性。同時(shí)這些數(shù)值類型元素還有兩個(gè)方法：stepUp(),stepDown()。都接受一個(gè)參數(shù)，要在當(dāng)前基礎(chǔ)上加上或減去的數(shù)值。

DOM:

js:

var input = document.getElementById("txtTel4");
var up = document.getElementById("up");

input.addEventListener("mousemove", function () {
    var output = document.getElementById("output");
    output.value = input.value;
});
up.addEventListener("click", function () {
    //點(diǎn)擊value值以2為單位增加
    input.stepUp(2);
    var output = document.getElementById("output");
    output.value = input.value;
});

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

var num = document.getElementById("number");
console.log(num.pattern); //d{3}

可以使用以下代碼來(lái)檢測(cè)瀏覽器是否支持pattern屬性：

var isPatternSupported="pattern" in document.createElement("input");

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

    
    
    
    


var form = document.forms[0];
var name = document.getElementById("name");
var number = document.getElementById("num");
var check = document.getElementById("check");
var submit = document.getElementById("submit");

check.addEventListener("click", function () {
    console.log(form.checkValidity()); //檢測(cè)整個(gè)表單是否正確
    if (form.checkValidity()) {
        submit.removeAttribute("disabled");
        check.disabled = true;
    }else{
        alert("請(qǐng)檢查表單");
    }
});

input的validity屬性會(huì)給出什么字段有效和無(wú)效的具體信息。

var inputName = document.getElementById("inputName");
inputName.onblur = function() {
    if (inputName.checkValidity()) {
        inputName.style.color = "white";
        inputName.style.backgroundColor = "green";

    } else {
        inputName.style.color = "white";
        inputName.style.backgroundColor = "red";
        if (inputName.validity.patternMismatch) {
            inputName.value = "請(qǐng)?zhí)顚懻_的格式";
        }
    }
};
inputName.addEventListener("mouseenter", function () {
    inputName.focus();
    inputName.select();
});

validity主要包括下列屬性：

customError：是否設(shè)置了setCustomValidity()；

patternMismatch：是否與pattern屬性匹配；

rangeOverflow：是否比max值大；

rangeUnderflow：是否比min值?。?/p>

stepMisMatch：步長(zhǎng)是否合理；

tooLong：是否超過(guò)了maxlength；

typeMismatch：是否不是mail類型和url類型；

valid：如果這里的其他屬性都是false，返回true；

valueMissing：如果為required中沒(méi)有值，返回true。

通過(guò)設(shè)置表單的novalidate屬性，可以是表單不進(jìn)行驗(yàn)證。用js獲取form之后，設(shè)置它的novalidate屬性為true，會(huì)禁用表單驗(yàn)證。

在提交按鈕上添加formnovalidate屬性，會(huì)不驗(yàn)證提交表單。用js獲取submit按鈕之后，設(shè)置它的formnovalidata屬性為true，會(huì)禁用表單驗(yàn)證并提交。