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;