JavaScript表单之基础篇

一、表单的基础知识    1.提交表单  提交表单最大的问题在于：用户重复提交，因此我们在第一次提交完毕后屏蔽提交的按钮、        var form = document.getElementById("myForm");   // 假设我们有一个name为myForm的表单        EventUtil.addHandler(form, "submit", function(event){            //取得事件对象            event = EventUtil.getEvent(event);            //阻止默认事件，即提交行为game over!            EventUtil.preventDefault(event);        });    2.重置表单  问题和提交表单类似，可阻止默认行为。有一点我想说的是：重置按钮基本应该很少用吧！这里不管他    3.表单字段        ①每个表单都有一个elements的属性，该属性是表单中所有元素（字段）的集合，可以通过数字下标或者是name名称来获得。            html:                <form name="myForm">                name : <input type="text" name="username"/><br/>                age  : <input type="text" name="age"/><br/>                <input type="submit" value="给我提交" name="submit"/>                </form>            js:                var form = document.forms[0];                for(var i = 0, len = form.elements.length; i < len; i++) {                    alert(form.elements[i].name);   // username, age, submit                }        ②如果有多个控件都使用一个name属性，那么返回的是一个nodeList数组            html:                <form id="myForm2">                    <ul>                        <li><input type="radio" name="color" value="red">Red</li>                        <li><input type="radio" name="color" value="green">Green</li>                        <li><input type="radio" name="color" value="blue">Blue</li>                    </ul>                </form>            js:                var form = document.forms["myForm2"];                var colors = form.elements['color'];                for(var i = 0, len = colors.length; i < len; i++) {                    alert(colors[i].value); // red,green,blue                }        ③共有的表单字段属性            a.disabled：布尔值，表示当前字段是否被禁用。            b.form：指向当前字段所属表单的指针；只读。            c.name：当前字段的名称。            d.readOnly：布尔值，表示当前字段是否只读。            e.tabIndex：表示当前字段的切换（tab）序号。            f.type：当前字段的类型，如"checkbox"、"radio"，等等。            g.value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件                var form = document.forms["myForm"];                var field = form.elements[0];                //修改value 属性                field.value = "Another value";                //检查form 属性的值                alert(field.form === form); //true                //把焦点设置到当前字段                field.focus();                //禁用当前字段                field.disabled = true;        ④共有的表单字段方法      focus()和blur（）        ⑤共有的表单字段事件            a.blur：当前字段失去焦点时触发。            b.change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；对于<select>元素，在其选项改变时触发。            c.focus：当前字段获得焦点时触发。            eg:                 var form = document.forms["myForm"];                var field = form.elements["username"];                EventUtil.addEvent(field, "change", function (event) {                    var event = EventUtil.getEvent(event);                    var target = EventUtil.getTarget(event);                    alert(target.value);    // 每当input失去焦点且value改变时弹出它的value值                });二、文本框脚本    在html中有两种文本框，即<input>和<textarea>,他们都可以通过value来设置初始值        1.选择文本            a.选择事件：在选择了文本框中的文本时触发            b.取得选择的文本：electionStart和selectionEnd表示选取文本的前后索引。但是ie8以下不支持该属性，然而它有一个属性为selection。                eg:                function getSelectedText(textbox){                    if (typeof textbox.selectionStart == "number"){                        return textbox.value.substring(textbox.selectionStart,                        textbox.selectionEnd);                    } else if (document.selection){//ie                        return document.selection.createRange().text;                    }                }                var form = document.forms['myForm'];                var username = form.elements["username"];                // 添加事件监听                EventUtil.addEvent(form, "select", function (event) {                    var event = EventUtil.getEvent(event);                    var target = EventUtil.getTarget(event);                    alert(getSelectedText(target));                });            c.取得选择的部分文本                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();                }                var username = document.forms[0].elements['username'];                username.value = "hello world";                // selectText(username, 0, username.value.length);  // 自动选择全部文本,hello world                selectText(username, 0, username.value.length - 3); // 自动选择全部文本,hello wo        2.过滤输入              a.屏蔽字符  有时候，我们需要用户输入的文本中包含或不包含某些字符。比如电话号码必须为数字                // 屏蔽非数字的任意键                var username = document.forms[0].elements['username'];                EventUtil.addEvent(username, "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){                        // 只能是0~9数字键、回车键，甚至连Ctrl键都不行                        EventUtil.stopDefault(event);                    }                });            b.操作剪贴板                1) 剪切板事件                    ①beforecopy：在发生复制操作前触发。                    ②copy：在发生复制操作时触发。                    ③beforecut：在发生剪切操作前触发。                    ④cut：在发生剪切操作时触发。                    ⑤beforepaste：在发生粘贴操作前触发。                    ⑥paste：在发生粘贴操作时触发。                    var EventUtil = {                        // 获取黏贴板的数据                        getClipboardText : function (event) {                            var clipboardText = (event.clipboardData || window.clipboardData);                            return clipboardText.getData("text");                        },                        // 设置黏贴板的数据                        setClipboardText : function (event, value) {                            if (event.clipboardData)                                {                                return event.clipboardData.setData("text/plain", value);                            } else if (window.clipboardData)    // ie                            {                                return window.clipboardData.setData("text", value);                            }                        },                    }                    var username = document.forms[0].elements['username'];                    EventUtil.addEvent(username, "paste", function(event){                        event = EventUtil.getEvent(event);                        var target = EventUtil.getTarget(event);                        var text = EventUtil.getClipboardText(event);   // 获取黏贴板的数据                        if (!/^\d*$/.test(text)){  // 只能为数字                            EventUtil.stopDefault(event);                        }                    });        3.自动切换焦点            html:   <form name="myForm">                        <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">                    </form>            js： (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.addEvent(textbox1, "keyup", tabForward);                        EventUtil.addEvent(textbox2, "keyup", tabForward);                        EventUtil.addEvent(textbox3, "keyup", tabForward);                    })();        4.html5约束验证API            1) 必填字段     <input type="text" name="username" required>            2) 其他输入类型   <input type="email" name ="email">            3) 数值范围     "number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"            4) 输入模式     <input type="text" pattern="\d+" name="count">            5) 检测有效性    使用checkValidity()方法可以检测表单中的某个字段是否有效,需要与pattern属性配合            6) 禁用验证     <input type="submit" formnovalidate name="btnNoValidate">三、选择框脚本 选择框是通过<select>和<option>创建的，它的类型为HTMLSelectElement    1.HTMLSelectElement的属性方法        a.add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。        b.multiple：布尔值，表示是否允许多项选择；等价于HTML 中的multiple 特性。        c.options：控件中所有<option>元素的HTMLCollection。        d.remove(index)：移除给定位置的选项。        e.selectedIndex：基于0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。        f.size：选择框中可见的行数；等价于HTML 中的size 特性。    2.HTMLOptionElement的属性        a.index：当前选项在options 集合中的索引        b.label：当前选项的标签；等价于HTML 中的label 特性。        c.selected：布尔值，表示当前选项是否被选中。将这个属性设置为true 可以选中当前选项        d.text：选项的文本。        e.value：选项的值（等价于HTML 中的value 特性）    3.选择选项        eg: 选取被选中的option            html：   <form name="myForm">                        <select name="location" id="selLocation" multiple = "multiple">                            <option value="北京" selected = "selected">北京</option>                            <option value="上海">上海</option>                            <option value="杭州" selected = "selected">杭州</option>                            <option value="">武汉</option>                            <option>广州</option>                        </select>                    </form>            js:     // 获取所有被选中的option                    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;                    }                    var selectbox = document.getElementById("selLocation");                    var selectedOptions = getSelectedOptions(selectbox);                    var message = "";                    for (var i=0, len=selectedOptions.length; i < len; i++){                        message += "Selected index: " + selectedOptions[i].index +                        "\nSelected text: " + selectedOptions[i].text +                        "\nSelected value: " + selectedOptions[i].value + "\n\n";                    }                    alert(message);    4.添加选项      用HTMLSelectElement类型中的add();        var selectbox = document.getElementById("selLocation");        var changsha = new Option("长沙", "changsha");        selectbox.add(changsha, undefined);    5.移除选项      用HTMLSelectElement类型中的remove();        selectbox.remove(0);        // 将北京移除    6.移动和排序选项        var selectbox = document.getElementById("selLocation");        var optionToMove = selectbox.options[1];    // 上海向后移动一个单位        selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);  四、表单序列化    function serialize(form){        var parts = [], field = null, i, j, optLen, option, optValue;        for (i=0, len=form.elements.length; i < len; i++){            field = form.elements[i];            switch(field.type){                case "select-one":                case "select-multiple":                    if (field.name.length){                    for (j=0, optLen = field.options.length; j < optLen; j++){                        option = field.options[j];                        if (option.selected){                            optValue = "";                            if (option.hasAttribute){                                optValue = (option.hasAttribute("value") ?                                option.value : option.text);                            } else {                                optValue = (option.attributes["value"].specified ?                                option.value : option.text);                            }                            parts.push(encodeURIComponent(field.name) + "=" +                            encodeURIComponent(optValue));                        }                    }                }                break;                case undefined: //字段集                case "file": //文件输入                case "submit": //提交按钮                case "reset": //重置按钮                case "button": //自定义按钮                break;                case "radio": //单选按钮                case "checkbox": //复选框                if (!field.checked){                    break;                }                /* 执行默认操作*/                default:                //不包含没有名字的表单字段                    if (field.name.length){                        parts.push(encodeURIComponent(field.name) + "=" +                        encodeURIComponent(field.value));                    }            }        }        return parts.join("&");    }五、富文本编辑 可以在里面添加修改内容    1.特征：即所看即所得。本质上，它是个包含了空html的frame框架。通过设置designMode属性来操作编辑文本框。    2.使用contenteditable属性       <div class="editable" id="richedit" contenteditable></div>