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