js中的表单元素操作

* 1.表单属性*  1.action:提交的url*  2.method:提交方式*  3.elements:表单控件的集合,可以使用下标或者name来访问,*  如：form1.elements["input01"],如果name相同就会返回所有*  4.length:表单控件的个数*  5.reset:重置表单*  6.submit:提交表单** 2.提交表单；*  1.使用submit按钮*  2.使用图片按钮<input type="image" src="images/sky01.jpg"/>*  3.编程方式调用submit方法(不会触发默认事件)** 3.阻止表单提交；只要阻止默认事件就可以了(一般在验证表单完才会提交,* 为防止重复提交可以在提交完一次就禁止点击)** 4.除了fieldset外的表单都有的属性:*  disabled:是否禁用*  form:所述表单指针*  name:顾名思义*  readOnly:是否只读*  tabIndex:按下tab键的跳转顺序*  type:控件类型*  value:提交给服务器的值**  5.对于表单元素都有focus和blur事件,这两个事件可以用来检测表单状态**  6.对于input和textarea而言还有change事件是当内容改变而且失去焦点的时候触发*      对于select则是当选项改变的时候触发**  7.input中type为text的元素可以设置size属性表示一行的字符个数,maxlength表示最大的输入值**  8.textarea可以使用rows和cols来设置**  9.对于textarea和input有select()方法来选中所有文本和一个select事件在文本被选中的时候触发**  10.要想取得选中的文本在标准浏览器中:在元素对象上有一个selectionStart和selectionEnd表示选中的文本的*  开始和结尾然后就可以获取选中的文本了,对于ie8-有一个document.selection.createRange().text方法可以*  获取选中的文本,但是这个方法是从鼠标按下就会选择，连续选中一串字符就会连续触发如:选中“555555”，它会出现*  5*  55*  555*  5555*  .。。。*  的情况，表示你连续选取**  11.对于自动选取部分文本的方法标准浏览器可以使用:setSelectionRange(startIndex,endIndex)*     对于ie8-可以使用下面的方法:*          1.创建范围:var range=elem.createTextRange();*          2.范围折叠:range.collapse(true);*          3.移到开头:range.moveStart("character",startIndex);*          4.移到结尾:range.moveEnd("character",endIndex);*          5.选择:range.select();*      function selectText(elem,startIndex,endIndex){*          //标准浏览器           if(elem.setSelectionRange){               elem.setSelectionRange(startIndex,endIndex);           }else if(elem.createTextRange){           //ie8-               var range=elem.createTextRange();               range.collapse(true);               range.moveStart("character",startIndex);               range.moveEnd("character",endIndex);               range.select();           }           elem.focus();       }***  12.屏蔽按键:*  对于键盘事件可以屏蔽某些字母的输入:*      1.屏蔽所有按键:这个简单，只要在事件处理函数中加上阻止默认就可以了*      2.屏蔽某些字符:可以使用正则表达式来匹配,满足匹配的阻止默认*      (对于输入框而言默认就是按下字符就会输入)**           //只能输入数字*          function  canInputNumber(elem){*                   elem.onkeypress=function(ev){*                   ev=ev?ev:window.event;*                   var charCode=ev.charCode;*                   if(/\D/.test(String.fromCharCode(charCode))){*                       ev.preventDefault();*                   }**               }*          }***  13.响应剪切板:*      beforecopy:再复制前触发；*      copy:复制的时候触发*      beforecut:剪切之前触发*      cut:剪切的时候触发*      beforepaste:粘贴之前触发;*      paste:粘贴的时候触发*   当然有事件也就有可以获取的数据:*      存在一个clipboardData表示剪切板的对象,这个对象有三个方法:*      getData(文本类型(text或者url)),setData(文本类型,值),clearData()*      e.g:event.clipboardData.getData("text")*      (对于ie浏览器clipboardData对象在window中,不再event中)*          在上面的剪切板事件中只有paste事件才能获取到剪切板的内容,也就是说只有在这个*      事件中才能使用getData()*          对于setData()需要在剪切或者复制的时候操作,但是设置值并不能改变剪切板的内容*      换句话说,就是即使使用了这个方法粘贴出来的内容也不是你设置的内容**  14.焦点的自动切换:*  这个只是针对特定输入有效，比如电话号码,固定的位数,当用户输入到这么多位数的时候就将焦点*  切换到下一个控件。**  15.HTML5自定义字段:*  为了约束输入值和防止禁用js，对于支持HTML5的浏览器有一些系统自带的API:*  required:<input type="text" required/>只要添加了这个字段，在提交的时候浏览器会自己检测的,没填的话会提示*  email:<input type="email"/>如果填写的不是email格式提交的时候会有系统自动提示*  tel:<input type="tel"/>同上*  。。。。。。。。*  (只是针对支持HTML5的浏览器有效)**  匹配的另一种方式是pattern=正则表达式*  <input type="text" pattern="/\d+/"/>*  (这个方法不能阻止用户输入，只是在提交的时候给出提示)*  (可以使用js进行简单的验证:*   elem.checkValidity()方法可以用来检测上面的约束,如果返回true就表示满足上面的约束就能进行下一步操作)*   if(elem.checkValidity()){*      //提交表单*   }else{*      //不提交*   }**   16.对于select元素和option元素的操作:*   select:*      add(newOption,relOption):插入option,relOption指在这个元素之前插入*      options:select中的option的HTMLCollection*      remove(index):删除option*      multiple:是否多选*      selectedIndex:选中的option的下标(在多选中只会返回一项,所以最好遍历)*      size:select中option的个数*  (使用add的时候如果想在最后插入可以使用add(newOption,undefined))**  option:*      index:在select中的索引*      selected:表示是否被选中*      text:文本选项*      value:value值*  (使用dom操嘴也可以实现访问属性和元素操作,但在select中不推荐这么做,效率相对太低)*  (还有就是在使用innerHTML来插入option在ie9-会出问题,亲测)*  对于option的增加，删除，查找都已有方法，对于option的重排可以使用insertBefore或者appendChild方法,对于子孙元素,插入相同*  的元素等于移动原来的元素**  16.表单序列化:*      对表单元素执行以下操作:*      1.对表单名称和值进行编码用&连接*      2.不发送禁用表单*      3.不发送reset和submit按钮*      4.select选择选中的发送*      。。*     执行序列化可以遍历所有表单元素提取值*     (当然如果是form提交方法系统会自己序列化,如果是使用ajax来提交就要自己手动序列化了)*     (序列化方案可以上网搜索,代码太多就不提供了)