JavaScript高级程序设计12--表单脚本

一、表单的基本知识

在HTML中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。
HTMLFormElement 具有它自己独有的属性和方法：

acceptCharset: 服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
action: 接受请求的 URL；等价于 HTML 中的 action 特性。
elements: 表单中所有控件的集合 (HTMLCollection)。
enctype: 请求的编码类型；等价于 HTML 中的 enctype 特性。
length: 表单中控件的数量。
method: 要发送的 HTTP 请求类型，通常是 "get" 或 "post"；等价于 HTML 的 method 特性。
name: 表单的名称；等价于 HTML 的 name 特性。
reset(): 将所有表单域重置为默认值。
submit(): 提交表单。
target: 用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。
1. 提交表单

（1）单击提交按钮提交表单

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif" >
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。

（2）取消表单提交
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
// 取得事件对象
event = EventUtil.getEvent(event);
// 阻止默认事件
EventUtil.preventDefault(event);
});解决重复提交表单的办法：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。
2. 重置表单

用户单击重置按钮重置表单时，会触发reset事件。

3. 表单字段

每个表单都有elements属性，可以按照位置和name特性来访问它们。

（1）共有的表单字段属性

disabled: 布尔值，表示当前字段是否被禁用。
form: 指向当前字段所属表单的指针；只读。
name: 当前字段的名称。
readOnly: 布尔值，表示当前字段是否只读。
tabIndex: 表示当前字段的切换 (tab) 序号。
type: 当前字段的类型，如 "checkbox"、"radio"，等等。
value: 当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
（2）共有的表单字段方法

focus() 方法：用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
blur() 方法：作用是从元素中移走焦点。

注意：HTML5为表单字段新增了一个autofocus属性，不用JavaScript就能自动把焦点移动到相应字段。

（3）共有的表单字段事件

blur: 当前字段失去焦点时触发。
change: 对于 <input> 和 <textarea> 元素，在它们失去焦点且 value 值改变时触发；对于 <select> 元素，在其选项改变时触发。
focus: 当前字段获得焦点时触发。
二、文本框脚本

在 HTML 中，有两种方式来表现文本框：一种是使用 <input> 元素的单行文本框，另一种是使用 <textarea> 的多行文本框。

1. 选择文本

上述两种文本框都支持 select() 方法，这个方法用于选择文本框中的所有文本。

（1）选择（select）事件

在选择了文本框中的文本，就会触发select事件。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event) {
var target = document.forms[0].elements["textbox1"];
alert("Text selected");
});（2）取得选择的文本
HTML5为取得选择的文本，添加了两个属性：selectionStart和selectionEnd

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}（3）选择部分文本
HTML5提供了选择部分文本的方法setSelectionRange()：接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

2. 过滤输入

（1）屏蔽字符

如果只想屏蔽特定的字符，则需要检测 keypress 事件对应的字符编码，然后再决定如何响应。

例如，下列代码只允许用户输入数值：
EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getTarget(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))) {
EventUtil.preventDefault(event);
}
});（2）操作剪贴板
下列就是6个剪贴板事件：

beforecopy：在发生复制操作前触发；
copy：在发生复制操作时触发；
beforecut：在发生剪切操作前触发；
cut：在发生剪切操作时触发；
beforepaste：在发生粘贴操作前触发；
paste：在发生粘贴操作时触发；
3. 自动切换焦点

4. HTML5约束验证API

必填字段：required属性；
其他输入类型：email和url等；
数值范围：number、range等；
输入模式：pattern属性；
检测有效性：checkValidity()方法，validity属性则会告诉你为什么字段有效或无效；
禁用验证：novalidate属性；

三、选择框脚本

选择框是通过 <select> 和 <option> 元素创建的。除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。

add(newOption, relOption): 向控件中插入新 <option> 元素，其位置在指定项 (relOption) 之前。
multiple: 布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
options: 控件中所有 <option> 元素的 HTMLCollection。
remove(index): 移除给定位置的选项。
selectedIndex: 基于 0 的选中项的索引，如果没有选中项，则值为 -1 。对于支持多选的控件，只保存选中项中第一项的索引。
size: 选择框中可见的行数；等价于 HTML 中的 size 特性。

选择框的 type 属性不是 "select-one" ，就是 "select-multiple"，这取决于 HTML 代码中有没有multiple特性。

在 DOM 中，每个 <option> 元素都有一个 HTMLOptionElement 对象表示。为便于访问数据，HTMLOptionElement 对象添加了下列属性：

index: 当前选项在 options 集合中的索引。
label: 当前选项的标签；等价于 HTML 中的 label 特性。
selected: 布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
text: 选项的文本。
value: 选项的值 (等价于 HTML 中的 value 特性)。

1. 选择选项

对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属性。
另一种选择选项的方式，就是取得对某一项的引用，然后将其
selected 属性设置为 true 。

2. 添加选项

采用DOM方法；
使用 Option 构造函数来创建新选项，它接受两个参数：文本(text) 和值 (value)（可选）；

使用选择框的 add() 方法，接受两个参数：要添加的新选项和将位于新选项之后的选项。

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);             // 最佳方案

3. 移除选项

使用DOM的removeChild() 方法，为其传入要移除的选项；
使用选择框的 remove() 方法，接受一个参数，即要移除选项的索引；

将相应选项设置为 null；

4. 移动和重排选项

使用 DOM 的 appendChild() 方法，可以将第一个选择框中的选项直接移动到第二个选择框中。

要将选择框中的某一项移动到特定位置，最合适的 DOM 方法就是 insertBefore()。
四、表单序列化

随着 Ajax 的出现，表单序列化已经成为一种常见需求。在 JavaScript 中，可以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。

在表单提交期间，浏览器是如何将数据发送给服务器的：

对表单字段的名称和值进行 URL 编码，使用和号 (&) 分隔。
不发送禁用的表单字段。
只发送勾选的复选框和单选按钮。
不发送 type 为 "reset" 和 "button" 的按钮。
多选选择框中的每个选中的值单独一个条目。
在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type 为 "image" 的 <input> 元素。
<select> 元素的值，就是选中的 <option> 元素的 value 特性的值。如果 <option> 元素没有 value 特性，则是 <option> 元素的文本值。

//表单序列化代码
function serialize(form){
var parts = new Array();
var field = null;
for(var i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
for(var j=0, optLen=field.options.length; j<optLen; j++){
var option = field.options[j];
if (option.selected){
var 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 "rest":            // 重置按钮
case "button":          // 自定义按钮
break;
case "radio":           // 单选按钮
case "checkbox":        // 复选框
if(!field.checked){
break;
}
/* 执行默认操作*/
default:
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
return parts.join("&");
}

五、富文本编辑

富文本编辑功能是通过一个包含空HTML文档的iframe元素来实现的，通过将空文档的designMode属性设置on或off（默认）来决定是否将该页面转换为可编辑状态。

1. 使用contenteditable属性

把contenteditable属性应用给页面中的任何元素，用户立即就可以编辑该元素。

2. 操作富文本

document.execCommand()方法：对文档执行预定义的命令，接收3个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值（通常设为false）和执行命令必须的一个值（如果不需要值，则传递null）。

与命令相关的方法：

queryCommandEnabled()方法：用来检测是否针对当前选择的文本，或者当前插入字符所在位置执行某个命令，接收一个参数即要检测的命令。
queryCommandState()方法：用于确定是否已经将指定命令应用到了选择的文本。
queryCommandValue()方法：用于取得执行命令时传入的值。

3. 富文本选区

在富文本编辑器中，使用框架的（iframe）的getSelection()方法，可以确定实际选择的文本，返回一个表示当前选择文本的Selection对象。

4. 表单与富文本

由于富文本编辑器是使用iframe而非表单控件实现的，因此在将其内容提交给服务器之前，必须将iframe或contenteditable元素中的HTML复制到一个表单字段中。