js表单

在HTML中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement ，因而与其他HTML元素具有相同的默认属性。

1、HTMLFormElement 也有自己独有的属性和方法：

acceptChartset：服务器能够处理的字符集，等价于 HTML 中的 accept-chartset

action：接受请求的 URL ，等价于 HTML 中的 action

elements：表单中所有空间的集合（HTMLCollection）

enctype：请求编码类型，等价于 HTML 中的 enctype

length：表单控件的数量

method：请求类型，"post"，"get"，等价于 HTML 的 method

name：表单的名称，等价于HTML 的 name 

reset()：重置表单方法

submit()：提交表单方法

target：用于发送请求和接受响应的窗口名称，等价于HTML的 target

2、获取表单元素引用

       var form = document.getElementById("formId");

       var forms = document.forms; // 获得页面中所有的表单

       var firstForm = document.forms[0];

       var form = document.forms["formName"]; // 通过form的name属性获取

3、表单事件：表单submit事件，表单reset事件

3.1 在form 中的 type类型为submit的按钮 点击后会触发 submit 事件

    <form id="form1" name="form1" action="#" method="get">
        <input type="text" name="name1" id="name1">
        <input type="text" name="age1" id="age1">
        <!--<input type="submit" value="提交" id="submit">-->
    </form>
    <input type="submit" value="提交" id="submit">
      

        var form1 = document.getElementById("form1");
        var submitBtn = document.getElementById("submit");

        submitBtn.onclick = function(e){   // 点击按钮手动触发表单提交事件，需要把按钮button放在表单外

            //form1.submit();  //若是执行这行代码，表单直接提交了，不会经过submit事件

            //手动触发事件
            if(document.createEvent){
                //FIREFOX\CHROME等标准浏览器
                var evt = document.createEvent('HTMLEvents');
                evt.initEvent('submit',false,true);
                form1.dispatchEvent(evt);
            }else{
                //IE8-浏览器
                var event = document.createEventObject();
                form1.fireEvent('onsubmit',event);
            }


        };

    EventUtil.addHandler(form1,"submit",function (e) {  // 特别执行submit事件处理程序，钮button放在表单内，会直接触发submit事件


        // todo 可以进行一些验证等操作

        e = EventUtil.getEvent(e);
        EventUtil.preventDefault(e);

        console.log("submit");
    });

3.2 在form 中的 type类型为reset的按钮 点击后会触发 reset 事件，将表单的输入框的内容恢复到初始状态

4、表单内的字段

4.1 表单字段共有的属性、方法、事件

 disabled：布尔值，表示是否被禁用

form：指向当前字段所属的表单指针，只读

name：当前字段的名称

readOnly：布尔值，表示是否只读

tabIndex：表示当前字段的切换（tab）序号

type：当前字段类型，如“checkbox”，“radio”等

value：提交给服务器的值，对于文件，这个值是文件路径，而文件的内容是 files属性

focus()：将浏览器的焦点设置到当前字段，如果 type 是 “hidden”，或者display/visibility 隐藏了该字段，调用focus()方法会出错。HTML5中有一个autofocus属性，可以自动聚焦。

blur()：从元素中移走焦点

        focus事件：当前字段获取焦点时触发

blur事件：当前字段失去焦点时触发

change事件：对于input 和 textarea 元素，在他们失去焦点且value值改变是触发，对于select 元素在其选项改变时触发

5、文本框，input[type="text"]、textarea

5.1 

input：

size特性，指定文本框显示的字符数

value特性：设置初始值

maxlength特性：指定可以接受的最大字符数

textarea：

rows特性：指定文本行数（高度）

cols特性：指定文本一行的列数（宽度）

这两种文本框都可以通过js 用文本框元素的 value 属性获取、设置内容。使用DOM方法，setAttribute() / getAttribute()，innerHTML/innerText 来修改 / 获取 <input>的value、<textarea>的内容，得不到、也无法设置真实的value值

5.2 选择文本

select() ：选择文本框的所有文本

select事件：选择了文本（可以是部分文本）并释放了鼠标时触发，ie8-不释放鼠标也会触发select事件

选择的文本：HTML5中为文本框添加了两个属性 selectionStart 和 selectionEnd（选择的文本在原文本中的起始和结束索引）；ie8- 中有 document.selection 对象保存着整个文档的选择文本信息           

        function getSelectionText(textBox) {
            if(typeof textBox.selectionStart == "number"){
                return textBox.value.substring(textBox.selectionStart,textBox.selectionEnd); // 
            }else if(document.selection){
                return document.selection.createRange().text;
            }
        }

 选择部分文本：HTML5中 setSelectionRange(startIndex, endIndex)来选择部分文本。ie8- 需要使用范围

       function setSelectText(textBox,startIndex,endIndex){
            if(textBox.setSelectionRange){
                textBox.setSelectionRange(startIndex,endIndex);
            }else if(textBox.createTextRange){
                var range = textBox.createTextRange();
                range.collapse(true);
                range.moveStart("character",startIndex);
                range.moveEnd("character",endIndex - startIndex);
                range.select();
            }
            textBox.focus();
        }

5.3 过滤输入：限制文本框输入某些字符

1）双击input会出现输入提交过的记录，只需要在input文本输入框中加一条autocomplete=”off”属性即可禁止

2）主要是利用阻止默认事件发生来不让输入

     EventUtil.addHandler(textbox,"keypress",function(e){
           e= EventUtil.getEvent(e);

           var target = EventUtil.getTarget(e);
           var charcode = EventUtil.getlCharCode(e);

            // 可以阻止非数字的输入，字符编码小于10的键是一些特殊件的键:向上、向下、向左、向右、退格、删除（其实这些键不会触发keypress事件）
            // 但不能禁止输入法输入中文
           if(!/\d/.test(String.fromCharCode(charcode)) && charcode >9 && !e.ctrlKey){
               EventUtil.preventDefault(e);  // 阻止默认事件发生，可以阻止字符输入
           }
        });
        EventUtil.addHandler(textbox,"keyup",function(e){
           e= EventUtil.getEvent(e);
           EventUtil.preventDefault(e);
            this.value=this.value.replace(/[^\x00-\x80]/gi,''); // 限制中文输入，将中文字符替换成空字符
        });
        EventUtil.addHandler(textbox,"paste",function(e){
           e= EventUtil.getEvent(e);
           EventUtil.preventDefault(e); // 阻止粘贴
           // return false;
        });
        EventUtil.addHandler(textbox,"dragenter",function(e){
           e= EventUtil.getEvent(e);
           EventUtil.preventDefault(e);  // 阻止拖拽
           //return false;
        });
        EventUtil.addHandler(textbox,"drop",function(e){
           e= EventUtil.getEvent(e);
           EventUtil.preventDefault(e);  // 阻止拖拽
          // return false;
        });

5.4 操作剪贴板

    有六个剪贴板事件：

beforecopy：在发生复制前出发

copy：复制时触发

beforecut：剪切前时触发

cut：剪切时触发

beforepaste：粘贴之前触发

paste：粘贴时触发

beforecopy，beforecut，beforepaste在各个浏览器的触发条件不一样，在ie中打开了上下文菜单就会触发，beforepaste在Chrome中都不会触发，在Firefox中这三个事件都不会触发

有个clipboardData 对象 ： clipboardData= (event.clipboardData || window.clipboardData); clipboardData对象有三个方法getData(), setData()，clearData()，来操作剪切板，但在Chrome 和 Firefox等浏览器中setData()和clearData()已经被禁了，无效了。

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

   function setClipboardText(event,value){  
        if(event.clipboardData){  //chrome firefox中已经失效或被禁了
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("Text",value);
        }
    },
    function clearClipboardText(event){  //chrome firefox中已经失效或被禁了
        var clipboardData = (event.clipboardData || window.clipboardData);
        clipboardData.clearData();
    }

 复制文本

      function copy() {
            var Url2=document.getElementById("tocopy").innerText;
            var oInput = document.createElement('input');
            oInput.value = Url2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            alert('复制成功');
        }

5.5 切换焦点

 var Oseries = document.getElementsByClassName("series");
    for(var i=0;i<Oseries.length;i++){
        EventUtil.addHandler(Oseries[i],"keyup",tabForward);
    }

    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; i< form.elements.length;i++){
                if(form.elements[i] == target){
                    if(form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return false;
                }
            }
        }
    }

 <form action="">
    <input type="text" class="series" id="" name="tex1" maxlength="3">
    <input type="text" class="series" id="" name="tex2" maxlength="3">
    <input type="text" class="series" id="" name="tex3" maxlength="3">
    </form>

6、下拉选择<select><option>

<select>，HTMLSelectElement 的属性和方法（除了表单字段共有的）

add(newOption,relOption)：在relOption之前插入新<option>,在最后插入reOption是null

multiple：布尔值，表示是否允许多选，等价于HTML中的multiple

options：控件中所有的option选项

remove(index)：移除给定位置的选项

selectedIndex：基于0 的选中项的索引，如果没有选中项值为-1，如果是多选，则是第一个选中项的索引；设置多选的selectedIndex，会使得选中项就是刚才设置的那个

size：选择框中可见的行数，等价于HTML中的size

value：没有选中项，value为空；有选中项，value为option的value特性，或者是option的文本（没有指定value特性时）；有多个选中项，value是第一个选中项的值；

option，HTMLOptionElement 的属性：

index：当前选项在options集合中的索引

label：当前选项的标签，等价于HTML中的label

selected：布尔值，表示当前选项是否被选中，设置为true 则可选中该项（如果是单选，则需该选项在最前）

text：选项的文本

value：选项的值，等价于HTML中的value特性

添加选项：

 //添加选项，方法一，使用dom方法
    var newOption = document.createElement("option");
    newOption.appendChild(document.createTextNode("optionText"));
    newOption.setAttribute("value","optionValue");
    selectBox.appendChild(newOption); // 可思议使用 insertBefore()/ replaceChild() 等方法

    //添加选项，方法二，使用dom方法和 Option 构造函数结合
    var newOption = new Option("OptionText","OptionValue"); // 返回一个option元素
    selectBox.appendChild(newOption); // ie8- 不能正常插入选项

    //添加选项，方法三，使用 Option 构造函数和 select.add()
    var newOption = new Option("optionText","optionValue");
    var relOption = selectBox.options[2];
    // 同时将一个选项添加两个地方，后面执行的语句的生效。下面两行代码：先是在relOption之前插入，接着就插入到最后并移除之前插入的选项
    selectBox.add(newOption,relOption);  //添加某个选项之前
    selectBox.add(newOption,undefined);  //添加在最后,ie8-第二个参数是可选的，若是null会报错，undefined 通用

移除选项：

// 每次操作后节点都会动态更新，下面三行代码会连续删除原来的前三个选项
  selectBox.removeChild(selectBox.options[0]); //移除，方法一
  selectBox.remove(0);//移除，方法二
  selectBox.options[0] = null;//移除，方法三

移动选项：

  selectBox1.appendChild(selectBox.options[2]);  // 从第一个下拉选择框，移动一项到其他选择框中，不用删除原来的选项
  var len = selectBox.options.length;
  selectBox.insertBefore(selectBox.options[len-1],selectBox.options[1]);// 同一个下拉选择框，最后一个移动到第二个，不用删除原来位置的选项

7、HTML5约束验证API。