表单脚本
1表单的基础知识
在HTML中，表单由form标签，在javascript中，表单对应HTMLFormElement类型，HTMLFormElement类型继承HTMLElement类型，所有它和其他的Element元素有相同的默认属性，同时它也有自己的属性和方法：
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>或<button>都可以定义提交按钮。只要将其type特性的值设置为“submit”即可，二图像按钮则是通过将<input>的type设置为“image”来定义的。
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">
在JS中我们同样可以以编程的方式调用submit（）方法来提交表单：
var form = document.getElementById("myForm");
//提交表单
form.submit();
1.2重置表单
<!-- 通用重置按钮 -->
<``input` `type``=``"reset"` `value``=``"Reset Form"``>
<!-- 自定义重置按钮 -->
<``button` `type``=``"reset"``>Reset Form</``button``>
在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值
用JS方法来重置表单：
var form = document.getElementById("myForm");
//重置表单
form.reset();
阻止重置表单的默认操作：
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
1.3表单字段
每一个表单都有element属性。
element包含着表单的所有字段，例如：<input>，<button>等
例：
var A=document。getElementById（"form1"）;
var A1=A.element[0]; //取得表单中的第一个字段。
var A2=A.element[aaa]; //取得表单中的"aaa"字段。
所有的表单字段都拥有相同的一组属性
disabled：
布尔值
当前字段是否被禁用
from:
只读
指向当前字段所属表单的指针
name：
当前字段的名称
readOnly：
布尔值
当前字段是否只读
tabIndex：
当前字段的切换序号
type：
当前字段的类型
<input>和<button>可以修改
<select>不可以修改
value:
当前字段将被提交给服务器的值
** 表单字段的共有方法有**
focus():表单字段获取焦点。HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性,
不用 JavaScript 就能自动把焦点移动到相应字段。
blur():表单字段失去焦点
表单字段的共有事件有
blur:当前字段失去焦点时触发。
change:对于<input> 和<textarea> 元素,在它们失去焦点且 value 值改变时触发;对于<select>元素,在其选项改变时触发。
focus:当前字段获得焦点时触发。
2文本框脚本
在HTML中，有两种方式来表现文本框：
使用<input>元素的单行文本框
使用<textarea>的多行文本框。
例：
<!--
文本框：
type特性为“text”
size特性：指定文本框中能显示的字符数
value特性：设置文本框的初始值
maxlength特性：指定文本框可以接受的最大字符数
-->
<input text="text" size="25" maxlength="50" value="initial value" />
<!--
多行文本框：
rows，cols特性：指定文本框的大小，其中rows指定文本框的字符行数，cols指定文本框的字符列数
初始值必须放在<textarea></textarea>之间
不能在HTML中指定最大字符数
-->
<textarea rows="5" cols="25"></textarea>
在选择了文本框的文本或调用select（）方法时会触发select事件
我们可添加selectionStart和selectionEnd属性来表示所选择文本的范围。
例：
function A(text){
return text.value.substring(text.selectionStart , text.selectionEnd);
}
选择部分文本的方法有：调用createTextRange（）和调用
selectText（）
使用createTextRange（）的方法为
文本.createTextRange（第一个字符索引，最后一个字符索引）；
使用selectText（）方法为：
selectText（文本，第一个字符索引，最后一个字符索引）
例：
text.value="abcd";
text.setselect(0,text.value.length); //"abcd"
text.createTextRange(0,2); //"abc"
text.value="abcd";
selectText(text,0,2); //"abc"
JavaScript中的过滤输入
我们可以通过检测keypress事件对应的字符编码，然后在决定如何响应。
操作剪贴板
javascript可以使用window.clipboardData对象处理剪贴板内容。
例：
<HTML>
<HEAD>
<TITLE>测试操作剪贴板</TITLE>
</HEAD>
<script>
function copyToClipboard()
{
var d=document.all("source").value;
window.clipboardData.setData('text',d);
}
</script>
<BODY>
<button οnclick="copyToClipboard();">拷贝</button>
<input type="text" size=20 id="source" value="测试数据">
<br>
<button οnclick="alert(window.clipboardData.getData('text'));">显示</button>
<button οnclick="window.clipboardData.clearData('text');">清空</button>
</BODY>
</HTML>
3.选择框脚本
选择框脚本通过<select>和<option>元素创建。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了以下的属性和方法：
add(newOption, relOption)：抽向控件中插入新的<option>元素，其位置在相关项(relOption)之前。
remove(indenx)：移除给定索引位置的选项。
multiple：布尔值，表示是否允许多项选择，与HTML中的multiple相似。
size：选择中可见的行数。与HTML中的size特性相似。
selectedIndex：基于0的选中项的索引，如果没有选中项，则返回-1。
选择选项
只允许选择一项的选择框，访问选中项
选择框的selectedIndex属性
与selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。需要注意的是，将 selected 属性设置为 false 对单选选择框没有影响；selected 属性的作用主要是确定用户选择了选择框中的哪一项
添加选项
使用 Option 构造函数来创建新选项
Option 构造函数接受两个参数：文本（text）和值（value）；第二个参数可选。 虽然这个构造函数会创建一个 Object 的实例，但兼容 DOM的浏览器会返回一个<option>元素
使用选择框的 add()方法
DOM规定这个方法接受两个参数：要添加 的新选项和将位于新选项之后的选项
移除选项
使用 DOM 的 removeChild()方法， 为其传入要移除的选项
selectbox.removeChild(selectbox.options[0]); //移除第一个选项
使用选择框的 remove()方法。这个方法接受一个参数，即要移除选项的索引
selectbox.remove(0); //移除第一个选项
将相应选项设置为 null
selectbox.options[0] = null; //移除第一个选项
移动和重排选项
移动：使用 DOM 的 appendChild()方法，可以将第一个选择框中的选项直接移动到第二个选择框中
为 appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的 父节点中移除它，再把它添加到指定的位置
移动选项与移除选项有一个共同之处，即会重置每一个选项的 index 属性
重排：将选择框中的某一项移动到特定位置，合适的 DOM 方法就是 insertBefore()；appendChild()方法只适用于将选项添加 到选择框的后
IE7存在使用DOM方法重排的选项不能马上正确显示的页面重绘问题
表单序列化
在 JavaScript中，可 以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化
富文本编辑
又称为 WYSIWYG（What You See Is What You Get，所见即所得）
本质：在页面中嵌入一个包含空 HTML页面的 iframe。通过设置 designMode 属性，这个空白 的 HTML页面可以被编辑，而编辑对象则是该页面元素的 HTML代码
designMode 属性有两 个可能的值："off"（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符 号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等
contenteditable属性
把 contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素
该属性不需要iframe、空白页、JavaScript
contenteditable 属性有三个可能的值："true"表示打开、"false"表示关闭，"inherit"表示 从父元素那里继承（因为可以在 contenteditable 元素中创建或删除元素）
操作富文本
交互的主要方式使用 document.execCommand()
为 document.execCommand()方法传递 3个参数： 要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（如果不需要值，则传递 null）
确保跨浏览器的兼容性，第二个参数应该始终设置为 false
不同的浏览器会产生一些不同
执行 bold 命令时，IE和 Opera会使用标签包围文本，Safari和 Chrome使用标签，而 Firefox则使用标签
与命令相关的一些方法
queryCommandEnabled()
可以用它来检 测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令
接收一个参数，即要 检测的命令
如果当前编辑区域允许执行传入的命令，这个方法返回 true，否则返回 false
queryCommandState()
用于确定是否已将指定命令应用到了选择的文本
queryCommandValue()
用于取得执行命令时传入的值
富文本选区
使用框架（iframe）的 getSelection()方法，可以确定实际选择的文本。 这个方法是 window 对象和 document 对象的属性，调用它会返回一个表示当前选择文本的 Selection 对象
表单与富文本
由于富文本编辑是使用 iframe 而非表单控件实现的，因此从技术上说，富文本编辑器并不属于表 单
不会自动提交给服务器，需要我们手动进行提交，可以添加一个隐藏的表单字段，让它的值等于从 iframe 中提取出的 HTML
通过 表单的 onsubmit 事件处理程序实现从 iframe 中提取出 HTML，并将其插入到隐藏的字段中
