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;
  })；