JS高级程序设计14-表单脚本

• 表单的基础知识（P412）

  在JS中，表单对应的时HTMLFormElement类型，同时HTMLFormElement也继承了HTMLElement，除了与其他HTML元素具有相同默认的属性，HTMLFormElement额外的属性和方法：

  acceptCharset--服务器能够处理的字符集；action--接受请求的URL；elements--表单中所有控件的集合；enctype--请求的编码类型；length--表单中控件的数量；method--要发送的HTTP请求类型，通常时“get”或"post";name:表单的名称；reset()--将所有表单域重置为默认值；submit()--提交表单；target--用于发送请求和接受相应的窗口名称//取得<form>元素引用的方式：var form=document.getElementById("form1");var firstForm=document.form[0]; //取得页面中的第一个表单var myForm=document.forms["form2"]; //取得页面中名称为"form2"的表单

  提交表单（P413）

  <input type="submit" value="Submit Form"> //通用提交按钮<button type="submit">Submit Form</button> //自定义提交按钮<input type="image" src="graphic.gif"> //图像按钮var form=document.getElementById("myForm");form.submit();//解决重复提交表单：在第一次提交表单后就禁用提交按钮；利用onsubmit事件处理程序取消后续的表单提交操作

  重置表单（P414）

  <input type="reset" value="reset Form"> //通用重置按钮<button type="reset">Reset Form</button> //自定义重置按钮var form=document.getElementById("myForm");form.reset();

  表单字段（P414）

  每个表单都有elements属性，该属性是表单中所有元素的集合;//表单字段共有的属性和方法：disabled--布尔值，表示当前字段是否被禁用；form--指向当前字段所属表单的指针；name--当前字段的名称；readOnly--布尔值，表示当前字段是否只读；tabindex--表示当前字段的切换序号；type--当前字段的类型；value--当前字段将被提交给服务器的值//除了form属性之外，JS可以动态修改其他任何属性var form=document.getElementById("myForm");var field=form.elements[0];field.value="Another value";//修改value属性alert(field.form===form); //检查form属性的值field.focus();//把焦点设置到当前字段field.disabled=true;//禁用当前字段field.type="checkboos";//修改type属性（不推荐）//共有的表单字段方法focus()--将焦点转移到某处设置autofocus属性也可以不使用JS就能自动把焦点移动到相应字段blur()--从元素中移走焦点//共有的表单字段事件blur--当前字段失去焦点时触发change--对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发focus--当前字段获得焦点时触发；

• 文本框脚本(P419)

  在HTML中，有和两种方式表现文本框

  选择文本（P420）

  select()--用于选择文本框中所有文本//使用select()使文本框在获得焦点时选择其所有文本EventUtil.addHandler(textbox,"focus",function(){     event=EventUtil.getEvent(event);    var target=EventUtil.getTarget(event);    target.select();});//选择（select）事件//取得选择的文本需要使用到selectionStart和selectionEnd两个属性function getSelectedText(textbox){     return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);}//选择部分文本setSelectionRange()方法

  过滤输入（P422）

  //屏蔽字符下面的代码屏蔽对非数字字符的输入，没有屏蔽上下按键、退格键、删除键、和ctrl键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){        EventUtil.preventDefaule(event);    }});//操作剪贴板6个剪贴板事件：beforecopy--在发生复制操作时触发；copy--在发生复制操作时触发；beforecut--在发生剪切操作前触发；cut--在发生剪切操作时触发beforepaste--在发生粘贴操作前触发paste--在发生粘贴操作时触发//要访问剪贴板中的数据，可以使用clipboardData对象为了兼容性，最好只在发生剪贴板事件期间使用clipboardData对象clipboardData对象有三个方法：getData()、setData()和clearData()getData()--用于从剪贴板取得数据，接受一个参数，即要取得的数据的格式；setData()--第一个参数时数据类型，第二个参数是要放在剪贴板中的文本；

  自动切换焦点（P426）

  <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 textbox1=document.getElementById("txtTel2");    var textbox1=document.getElementById("txtTel3");    EcentUtil.addHandler(textbox1,"keyup",tabForward);    EcentUtil.addHandler(textbox2,"keyup",tabForward);    EcentUtil.addHandler(textbox3,"keyup",tabForward);})();

  HTML5约束验证API（P427）
  HTML5新增了一些即使JS被禁用也可以保证基本的验证的功能

  //必填字段任何标注required属性的字段，在提交表单时都不能空着；//其它输入类型HTML5为type属性新增加了几个值，"email"和"url"email--要求输入的文本必须符合电子邮件地址的模式url--要求输入的文本必须符合URL的模式//数值范围HTML5为type属性还新增了一些基于数字的值："number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"、"time"这些类型有两个方法：stepUp()和stepDown()//输入模式HTML5为文本字段新增了pattern属性：<input type="text" pattern="\d+" name="count">//检测有效性checkValidity()方法可以检测表单中的某个字段是否有效validity属性会告诉你为什么字段有效或无效：customError：如果设置了setCustomValidity()，则为true，否则返回false；patternMismatch：如果值与指定的pattern属性不匹配，返回true；rangeOverflow:如果值比max值大，返回true；rangeUnderflow：如果值比min值小，返回true；stepMisMatch:如果min和max之间的步长值不合理，返回true；tooLong：如果值的长度超过了maxlength属性指定的长度，返回true；typeMismatch：如果值不是"mail"或"url"要求的格式，返回true；valid：如果这里的其他属性都是false，返回true；valueMissing：如果标注为required的字段没有值，返回true。、//禁用验证通过设置novalidate（在<form>y=元素上使用），可以告诉表单不进行验证；如果一个表单有多个提交按钮，对其中的一个按钮添加formnovalidate属性，可以使相应的提交按钮不必验证表单

• 选择框脚本（P431）

  选择框脚本时通过和元素创建的

  //HTMLSelectElement类型另外提供的属性和方法：add(newOption,relOption)--向控件中插入新<option>元素，其位置在相关项之前；multiple--布尔值，表示是否允许多想选择；options--控件中所有<option>元素的HTMLCollection;remove(index)--移除给定位置的选项；selectedIndex--基于0的选中项的索引，如果没有选中项，则值为-1；size--选择框中可见的行数//HTMLOptionElement对象的属性：index--当前选项在options集合中的索引；label--当前选项的标签；selected--布尔值，表示当前选项是否被选中；text--选项的文本；value--选项的值

  选择选项（P432 ）

  selectedIndex属性可以选择选中项

  添加选项（P434）

  方法一：var newOption=document.createElement("option");newOption.appendChild(document.createTextNode("Option text"));newOption.setAttribute("value","Option value");selectbox.appendChild(newOption);方法二：var newOption=new Option("Option text","Option value");selectbox.appendChild(newOption);方法三：var newOption=new Option("Option text","Option value");selectbox.add(newOption,undefined); //最佳方案

  移除选项（P435）

  方法一：selectbox.removeChild(selectbox,options[0]); //移除第一个选项方法二：selectbox.remove(0); 方法三：selectbox.option[0]=null;

  移动和重排选项（P435）

  var selectbox1=document.getElementById("selLocations1");var selectbox2=document.getElementById("selLocations2");selectbox2.appendChild(selectbox1.options[0]);(还有更好的方法)

• 表单序列化(P436)

  Ajax的出现，使得表单序列化成为一种常见需求

  function serialize(form){     var parts=[],field=null,i,len,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,option=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("&");}

• 富文本编辑

  富文本编辑介绍

  使用<iframe>创建富文本编辑区域设置其designMode属性，可以使这个空白的HTML页面可以被编辑

  使用contenteditable属性

  contenteditable属性可以应用到页面中的任何元素，使相应的元素可以编辑，同样，也可以让富文本编辑区域可以编辑；

  操作富文本

  与富文本编辑器交互的主要方式，就是使用document.execCommand()方法；//转换粗体文本frames["richedit"].document.execCommand("bold",false,null);//转换斜体文本frames["richedit"].document.execCommand("italic",false,null);注：document.execCommand()方法不但适用于iframe区块，也适用于其他区块//queryCommandEnabled()方法可以检测当前富文本编辑器是否可以执行某个命令：var result=frames["richedit"].document.queryCommandEnabled("bold");//queryCommandState()方法用于确定是否已将指定命令应用到了选择的文本：var isBold=frames["richedit"].document.queryCommandState("bold");//queryCommandValue()用于取得执行命令时传入的值：var fontsize=frames["richedit"].document.queryCommandValue("fontsize");

  富文本选区

  在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本，并返回表示当前选择文本的selection对象；//selection对象的属性（略）var selection=frames["richedit"].getSelection();//取得选择的文本var selectedText=selection.toString();

  表单与富文本

  富文本编辑器不属于表单，需要手工来提取并提交HTML：在提交表单前，从iframe中提取出HTML，并将其插入到最近添加的隐藏的字段中EventUtil.addHandler(form,"submit",function(event){     event=EventUtil.getEvent(event);    var target=EventUtil.getTarget(event);    target.element['comments'].value=frames["richedit"].document.body.innerHTML;})；//不仅仅是富文本，其他contenteditable元素也可以：EventUtil.addHandler(form,"submit",function(event){     event=EventUtil.getEvent(event);    var target=EventUtil.getTarget(event);    target.element['comments'].value=document.getElementById("richedit").innerHTML;})；