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>