表单脚本

文章目录

1. 1. 表单字段
   1. 1.1. 避免多次提交表单
2. 2. 选择文本
   1. 2.1. 跨浏览器取得选择文本
   2. 2.2. 跨浏览器选择部分文本
3. 3. 过滤输入
   1. 3.1. 屏蔽字符
   2. 3.2. 操作剪贴板
4. 4. 自动切换焦点

表单字段

避免多次提交表单

EventUtil.addHandler(form, "submit", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    //取得提交按钮
    var btn = target.elements["submit-btn"];

    //禁用它
    btn.disabled = true;
});

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用javascript 就能自动把焦点移动到相应字段。

<input type="text" autofocus>

为了保证前面的代码在设置 autofocus 的浏览器中正常运行，必须先检查是否设置了改属性，如果设置了，就不用再调用 foucus() 了。

EventUtil.addHandler(window, "load", function(event){
    var element = document.forms[0].elements[0];
    if (element.autofocus != true) {
        element.focus();
    }
});

选择文本

跨浏览器取得选择文本

function getSelectedText(textbox) {
    if (typeof textbox.selectionStart == "number") {
        return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    } else if (document.selection) {  //IE 8-=
        return document.selection.createRange().text;
    }
}

跨浏览器选择部分文本

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {    //IE 8-=
        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个字符
selectText(text, 0, 3);    //"Hel"

//选择第 4 到第 6 个字符
selectText(textbox, 4, 7); //"o w"

选择部分文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。

过滤输入

屏蔽字符

下列代码只允许用户输入数值

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) {   //Safari 3-
        EventUtil.preventDefault(event);
    }
});

操作剪贴板

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

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

在需要确保黏贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。例如，如果一个文本框只接受数值，那么久必须检测黏贴过来的值。

EventUtil.addHandler(textbox, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);

    if(!/^\d*$/.test(text)) {
        EventUtil.preventDefault(event);
    }
});

自动切换焦点

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

不过这些代码只适用于前面给出的标记，而且没有考虑隐藏字段。