4.2 文本框腳本

有兩種文本框：

input元素，type=”text”

textarea

14.2.1 選擇文本

文本對象使用select()方法來選擇文本。下面代碼會在文本框獲得焦點時全選文本。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox,"focus",function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getEvent(event);
    target.select();
});

相關事件：

1、select事件

select()方法對應的是一個select事件，在選擇文本框中的文本時會觸發select事件。下面代碼可以在文本內容被選中時顯示該文本的全部內容：

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

2、獲得選中的文本

如果要取得所選擇的文本，可以通過selectionStart和selectionEnd來完成。

var textbox = document.forms[0].elements["firstText"];
EventUtil.addHandler(textbox,"select",function (event) {
    alert(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd));
});

如果要兼容更老版本的話，可以使用下面的代碼：

var textbox = document.forms[0].elements["firstText"];
EventUtil.addHandler(textbox,"select",function (event) {
    if (typeof textbox.selectionStart == "number"){
        alert(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd));
    } else if (document.selection){
        alert(document.selection.createRange().text);
    }
});

3、用代碼選中文本

var textbox = document.forms[0].elements["firstText"];
textbox.value = "Hello world!";
// 選中所有文本

textbox.setSelectionRange(0,textbox.value.length);
// 選中前3個字符：0,1,2
textbox.setSelectionRange(0,3);
// 選中第4到6的字符：4,5,6
textbox.setSelectionRange(4,7);
// 要看到選擇的文本，需要將焦點設置到文本框

textbox.focus();

為了兼容老的瀏覽器，可以使用以下函數：
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();
}

14.2.2 過濾輸入

1、屏蔽字符

屏蔽所有字符：

var textbox = document.forms[0].elements["firstText"];
EventUtil.addHandler(textbox,"keypress",function (event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

只允許輸入數字：

var textbox = document.forms[0].elements["firstText"];
EventUtil.addHandler(textbox,"keypress",function (event) {
    event = EventUtil.getEvent(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
        EventUtil.preventDefault(event);
    }
});

其中有新增一個getCharCode方法，并且要理解在js如何使用正則表達式。

2、操作剪貼板

• beforecopy：在發生復制操作前觸發。
• copy：在發生復制操作時觸發。
• beforecut：在發生剪切操作前觸發。
• cut：在發生剪切操作時觸發。
• beforepaste：在發生粘貼操作前觸發。
• paste：在發生粘貼操作時觸發。

下面代碼會在將內容粘貼到文本框時檢查其是否數字：

EventUtil.addHandler(textbox,"paste",function (event) {

    event = EventUtil.getEvent(event);

    var text = EventUtil.getClipboardText(event);

    if (!/^\d*$/.test(text)){

        EventUtil.preventDefault(event);

    }

});

14.2.3 自動切換焦點

示例代碼是美國電話號碼，分為3段，長度分別為3,3,4，在每個文本框內容數量達到maxLength時會自動將焦點切換到下一個控件：

<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">

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

})();

14.2.4 HTML5的約束驗證API

HTML5規范帶有許多約束驗證API，在JS代碼被禁用時也可以進行驗證。

1、必填字段 required

<input type="text" name="tel1" id="txtTel1" maxlength="3" required>

submit時帶有required的字段不能為空。

js代碼中可以通過訪問required屬性來得到：

var textbox = document.forms[0].elements["textbox"]

var isUsernameRequired = textbox.required;

使用下面代碼也可以判斷瀏覽器否支持required屬性：

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

2、HTML5中新增的input元素的type屬性

email、url

3、數值范圍

input的type屬性還有如下跟數值有關的屬性：

number、range、datetime、datetime-local、date、month、week、time

它們大多都有min與max和step方法。

還有以下調節數據的方法：

• input.stepUp(); //+1
• input.stepUp(5); // +5
• input.stepDown(); // -1
• input.stepDown(10); // -10

4、輸入模式（正則表達式）

HTML元素支持正則表達式，如下面的text中只允許輸入數字：

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

在js代碼中可能通過pattern屬性訪問到HTML中的模式：

var textbox = document.forms[0].elements["count"];

var pattern = textbox.pattern;

可以通過以下代碼判斷瀏覽器是否支持pattern：

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

5、在JS代碼中檢測表單值有效性

可以對元素使用checkValidity()方法：

var textbox = document.forms[0].elements["count"];

var result = textbox.checkValidity();

也可以對form進行檢測，所有字段通過則會返回true：

if (document.forms[0].checkValidity()){

    // 表單中字段全部通過驗證，繼續
} else {

    // 表單未全部通過驗證
}

元素的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。

6、禁用驗證

在input或form中都可以添加novalidate來表示不進行驗證。

js中可以通過noValidate屬性來得知元否是否是禁用驗證，也可以通過此值來進行設置：

document.forms[0].noValidate = true;

如果一個表單中有多個提交按鈕，可以一個按鈕中指定formnovalidate屬性。

在js代碼中也可以為按鈕設置該屬性：

按鈕.formNoValidate = true;