表单脚本

表单的基础知识

由于web表单没有为许多常见任务提供现成的解决办法，很多开发人员不仅会在验证表单时使用JavaScript，而且还增强了一些标准表单控件的默认行为。

1. 在HTML中，表单是由<form>元素来表示的。
2. 在JavaScript中，表单对应的则是HTMLForm-Element类型，此类型继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。
3. 不过此类型也有它自己独有的属性和方法。
4. 取得<form>元素引用的方式：
   
   • var form = document.getElementById("myform");
   • 通过document.forms可以取得页面中所有的表单。通过数值索引或name值来取得特定的表单。
   • 把每个设置了name特性的表单作为属性保存在document对象中。document.myform(不推荐)

提交表单

1. 用户单击提交按钮或图像按钮时，会提交表单。

   通用提交按钮<input type="submit" value="submit form">自定义提交按钮<button type="submit">submit form</button>图像按钮<input type="image" src="graphic.gif">

   • 只要表单存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单。（textarea是一个例外，在文本区中回车会换行），如果表单里没有提交按钮，按回车键不会提交表单。
   • 以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。然后就可以验证表单数据，并决定是否允许表单提交。
   • 阻止这个事件的默认行为就可以取消表单提交。在表单数据无效而不能发送给服务器时，可以使用这一技术。EventUtil.preventDefault(event);

2. 以编程方式调用submit()方法也可以提交表单。

   • form.submit()
   • 以这种方式提交表单时，不会触发submit事件。
   • 所以在调用此方法之前先验证表单数据。
3. 避免重复提交表单：
   
   • 在第一次提交表单后就禁用提交按钮
   • 利用onsubmit事件处理程序取消后续的表单提交操作。

重置表单

1. 在用户单击重置按钮时，表单会被重置。
   
   • 使用type特性值为reset的<input>或<button>都可以创建重置按钮。
   • 在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。
   • 用户单击重置按钮重置表单时，会触发reset事件，此时可以在必要时取消重置操作。
2. form.reset();也可以重置表单
   
   • 调用此方法会像单击重置按钮一样触发reset事件

表单字段

1. 可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。

2. 每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。

   • 这个elements集合是一个有序列表。
   • 每个字段在elements集合中的顺序，与他们出现在标记中的顺序相同。
   • 可以按照位置和name特性来访问它们

   vat form=document.getElementById("myform");var field1=form.elements[0];var field2=form.elements["textbox1"];var fieldCount=form.elements.length;

   • 如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name命名的一个NodeList。如果要访问elements[name]，就会返回第一个元素

共有的表单字段属性

1. 除了<fieldset>元素外，所有表单字段都拥有相同的一组属性。
   
   • disabled：布尔值，表示当前字段是否被禁用
   • form：指向当前字段所属表单的指针
   • name：当前字段的名称
   • readOnly：布尔值，表示当前字段是否只读
   • tabIndex：表示当前字段的切换（tab）序号
   • type：当前字段的类型
   • value：当前字段将被提交给服务器的值。
2. 除了form属性之外，可以通过JavaScript动态修改其他任何属性
3. 能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。
4. 除了<fieldset>之外，所有表单字段都有type属性。<input>和<button>元素的type属性是可以动态修改的，而<select>元素的type属性则是只读的。

共有的表单字段方法

1. 每个表单字段都有2个方法：focus()和blur()。
2. focus():
   
   • 用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件
   • HTML5为表单字段新增了一个autofocus属性，在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。<input type="text" autofocus> autofocus是一个布尔值，所以在支持的浏览器中中它的值应该是true。
3. blur()
   
   • 从元素中移走焦点

共有的表单字段事件

1. blur：当前字段失去焦点时触发
2. change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发。对于<select>元素，在其选项改变时触发。
   
   • 在不同表单控件中触发的次数会有所不同。
   • 对于<input>和<textarea>元素，当他们从获得焦点到失去焦点且value值改变时才会触发change事件
   • 对于<select>元素，只要用户选择了不同的选项，就会触发change事件
3. focus：当前字段获得焦点时触发
4. 在某些浏览器中，blur事件会先于change事件发生；而在其他浏览器中，则恰好相反。

文本框脚本

1. 在HTML中，有2种方式来表现文本框：<input>和<textarea>
2. <input>单行文本框
   
   • type必须为text
   • size：指定文本框中能够显示的字符数
   • value：文本框的初始值
   • maxlength：文本框可以接受的最大字符数
3. <textarea>多行文本框
   
   • rows：文本框的字符行数
   • cols：文本框的字符列数
   • 初始值放在<textarea>和</textarea>之间
4. 都会将用户输入的内容保存在value属性中。textbox.value

选择文本

1. select()方法
   
   • 用于选择文本框中的所有文本
   • 在调用select()方法时，大多数浏览器（opera除外）都会将焦点设置到文本框中。
2. 选择（select）事件
   
   • 在选择了文本框中的文本时，就会触发select事件。（因浏览器而异）

3. 取得选择的文本，办法是添加了2个属性

   • selectionStart
   • selectionEnd
   • 这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）

   textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);//取得用户在文本框中选择的文本

   • 在ie8及更早的版本中有一个document.selection对象

     • 其中保存着用户在整个文档范围内选择的文本信息
     • 也就是说，无法确定用户选择的是页面中的那个部位的文本。
     • 要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。
     • 不需要考虑textbox参数

     if(document.selection){    return document.selection.createRange().text;}

4. 选择部分文本

   • 所有的文本框都有一个setSelectionRange()方法。该方法接受2个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

   • ie8及更早版本支持使用范围选择部分文本：

     • createTextRange()方法创建一个范围，并将其放在恰当的位置上。
     • 使用collapse()将范围折叠到文本框的开始位置
     • 然后再使用moveStart()和moveEnd()这两个范围方法将范围移动到位
     • 适用范围的select()方法选择文本

     textbox.value="hello world";var range=textbox.createTextRange();range.collapse(true);range.moveStart("character",0);range.moveEnd("character",textbox.value.length);//hello worldrange.select();

过滤输入

1. 由于文本框在默认情况下没有提供多少验证数据的手段，因此必须使用JavaScript来完成此类过滤输入的操作。
2. 屏蔽字符：如果只想屏蔽特定的字符，则需要检测keypress事件对应的字符编码，然后再决定如何响应。
3. 操作剪贴板：6个剪贴板事件
   
   • beforecopy：在发生复制操作前触发
   • copy：在发生复制操作时触发
   • beforecut：在发生剪切操作时触发
   • cut：在发生剪切操作时触发
   • beforepaste：在发生粘贴操作前触发
   • paste：在发生粘贴操作时触发
     
     1. 这些事件及相关对象会因浏览器而异。
     2. 取消before。。事件并不会取消对剪贴板的操作————只有取消copy、cut、和paste事件，才能阻止相应操作发生。
     3. 要访问剪贴板中的数据，可以使用clipboardData对象。
        
        • 为了保证跨浏览器兼容性，最好只在发生剪贴板事件期间使用这个对象。
        • 这个对象有三个方法：
        • getData()：用于从剪贴板中取得数据，一个参数：取得数据的格式；firefox、safari、和chrome只允许在onpaste事件处理程序中访问getData()方法
        • setData()：第一个参数：数据类型；第二个参数：要放在剪贴板中的文本；成功后返回true
        • clearData()

自动切换焦点

1. 方式：在用户填写完当前字段时，自动将焦点切换到下一个字段。
2. 通常，在自动切换焦点之前，必须知道用户已经输入了既定长度的数据（例如电话号码）

HTML5约束验证API

1. 为了在将表单提交到服务器之前验证数据，HTML5新增了一些功能。有了这些功能，即使JavaScript被禁用或者由于种种原因未能加载，也可以确保基本的验证。
2. 要在HTML标记中为特定的字段指定一些约束，然后浏览器 才会自动执行表单验证。
3. 必填字段：required属性
   
   • 这个属性适用于<input>、<textarea>、<select>字段
   • 对于空着的必填字段，不同浏览器有不同的处理方式。
     
     • firefox4和opera11会阻止表单提交并在相应字段下方弹出帮助框
     • safari5以前和chrome9以前则什么也不做，而且也不阻止表单提交
4. 其他输入类型：元素的type属性又增加了值
   
   • email：必须符合电子邮件地址的模式
   • url：必须符合URL的模式
   • 如果没有设置required，空文本也会验证通过
   • 设置特定的输入类型并不能阻止用户输入无效的值，只是应用某些默认的验证而已

5. 数值范围

   • 数值类型的输入元素（number\range\datetime\datetime-local\date\month\week\time）
   • 可以为其指定min属性、max属性、step（从min到max的两个刻度间的差值）
   • 上述属性可以通过js的stepUp()和stepDown()方法访问或修改，参数是在当前值基础上加或减（浏览器还未支持）

   <input type="number" min="0" max="100" step="5" name="count"><script>    input.stepUp();//加1    input.stepDown();//减1    input.stepUp(5);//加5    input.stepDown(5);//减5</script>

6. 输入模式：pattern属性
   
   • 这个属性的值是一个正则表达式，用于匹配文本框中的值
   • 指定pattern也不能阻止用户输入无效的文本。浏览器可以来判断值是有效还是无效
7. 检测有效性：
   
   • checkValidity()方法，可以检测表单中的某个字段是否有效。如果有效则返回true
   • validity属性会告诉你为什么字段有效或无效，这个对象中包含一系列属性，每个属性会返回一个布尔值
8. 禁用验证：
   
   • nobalidity属性，指定表单不进行验证
   • formnovalidity属性，指定点击某个提交按钮不必验证表单

选择框脚本

1. 选择框是通过<sekect>和<option>元素创建的
2. 除了所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了别的属性和方法
   
   • add（newoption，reloption）：位置在reloption前
   • multiple：布尔值，表示是否允许多项选择
   • options：所有<option>元素的HTMLCollection
   • remove（index）：移除给定位置的选项
   • selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1。对于多选，只保存选中项中第一项的索引
   • size：选择框中可见的行数
3. 选择框的type属性不是”select-one”，就是”select-multiple”，这取决于HTML代码中有没有multiple特性
4. 选择框的value属性
   
   • 如果没有选中的项，保存空字符串
   • 如果有一个选中项，并且指定了value，则保存指定的值
   • 如果有一个选中项，但没有指定value值，则保存该项的文本
   • 如果有多个选中项，保存第一个的
5. 每个<option>元素都有一个HTMLOptionElement对象表示，该对象添加的属性：
   
   • index：当前项在options集合中的索引
   • lable：当前选项的标签
   • selected：布尔值，表示当前选项是否被选中
   • text：选项的文本
   • value：选项的值
6. 不推荐使用标准DOM技术修改<option>元素的文本和值。

选择选项

1. 只允许选择一项：使用选择框的selectedIndex属性来访问选中项
   selectedoption=selectbox.options[selectbox.selectedIndex]
2. 可以多选的选择框，设置上述属性会导致取消之前的所有选项并选择指定的那一项；读取则会返回选中项中第一项的索引值。
3. 选择多项的另一种方式：设置选项的selected属性，可以动态的选中任意多个项。如果是单选框，修改某个选项的selected属性则会取消对其他选项的选择。注意：将selected属性设置为false对单选框没有影响

添加选项

1. 使用DOM方法

2. Option构造函数

   • 两个参数：文本（text）和值（value），第二个参数可选
   • 兼容DOM的浏览器会返回一个<option>元素

   var newOption=new Option("option text","option value");selectbox.appendChild(newOption);

3. add()方法

   • 2个参数：要添加的新选项，和位于新选项之后的选项

   var newoption=new Option("text","value");selectbox.add(newoption,undefined);//将新选项添加到列表最后

移除选项

1. DOM的removeChild()方法，传入要移除的选项
2. 选择框的remove方法，参数：移除选项的索引
3. 将相应选项设置为null

移动和重排选项

1. appendChild()方法，从第一个的选择框中移到第二个选择框的末尾，且在第一个中被删除
2. insertBefore()方法，将选择框的某一项移动到特定位置
3. ie7存在一个页面重绘问题，有时候会导致使用DOM方法重排的选项不能马上正确显示

表单序列化

1. 在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。
2. 浏览器将数据发送给服务器的方式：
   
   • 对表单字段的名称和值进行URL编码，使用&分隔
   • 不发送禁用的表单字段
   • 只发送勾选的复选框和单选按钮
   • 不发送type为“reset“和”button“的按钮
   • 多选选择框中的每个选中的值单独一个条目
   • 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为”image“的<input>元素
   • <select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值
3. 在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。
4. 如果表单中包含<fieldset>元素，则该元素会出现在元素集合中，但没有type属性。因此，如果type属性未定义，则不需要对其进行序列化。
5. 同样，对于各种按钮以及文件输入字段也是如此（文件输入字段在表单提交过程中包含文件的内容；但是，这个字段是无法模仿的，序列化时一般都要忽略）

富文本编辑

1. 本质是：在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>元素的HTML代码。

2. designMode属性的值：

   • off（默认值）
   • on：整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等
   • 但只有在页面完全加载之后才能设置这个属性

   <iframe name="name1" style="height:100px;width:100px;" src="blank.htm"></iframe><script type="text/javascript">    EventUtil.addHandler(window,"load",function(){        frames["name1"].document.designMode="on";    });</script>

使用contenteditable属性

1. 可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
2. 通过在这个元素上设置conteneditable属性，也能打开或关闭编辑模式。

3. 属性的值：

   • true：打开
   • false：关闭
   • inherit：从父元素那里继承

   <div id="id1" contenteditable></div>
div.contenteditable="true";

操作富文本

1. 与富文本编辑器交互的主要方式，就是使用document.execCommand()，这个方法可以对文本执行预定义的命令，而且可以应用大多数格式。

2. 方法的三个参数：

   • 要执行的命令名称：
   • 表示浏览器是否应该为当前命令提供用户界面的一个布尔值：始终为false
   • 执行命令必须的一个值：如果不需要值，则传递null

   //转换粗体文本frames[name1].document.execCommand("bold",false,null);//创建指向www.wrox.comframes[name1].document.execCommand("createlink",false,"http://www.wrox.com");

3. 同样的方法也适用于页面中contenteditable属性为”true”的区块，只要把对框架的引用替换成当前窗口的document对象即可。

   document.execCommand("bold",false,null);document.execCommand("createlink",false,"http://www.wrox.com");

4. queryCommandEnabled()方法
   
   • 可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令
   • 参数：要检测的命令
   • 如果当前编辑区允许执行传入的命令，返回true
   • 返回true不意味着实际上就可以执行响应命令，只能说明对当前选择的文本执行响应命令是合适的
5. queryCommandState()方法
   
   • 用于确定是否已将指定命令应用到了选择的文本
   • 参数：要确定的命令
   • 如果已经应用到了，返回true
6. queryCommandValue()方法
   
   • 用于取得执行命令时传入的值（即传入document.execCommand()的第三个参数）

富文本选区

1. 在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。
2. 这个方法是window对象和document对象的属性，调用它会返回一个表示当前选择文本的Selection对象。
3. 上述对象有的属性：
   
   • anchorNode：选区起点所在的节点
   • anchorOffset：在到达选区起点位置之前跳过的anchorNode中的字符数量
   • focusNode：选区终点所在的节点
   • focusOffset：focusNode中包含在选区之内的字符数量
   • isCollapsed：布尔值，表示选区的起点和终点是否重合
   • rangeCount：选区中包含的DOM范围的数量
4. 上述对象也有许多方法

表单与富文本

1. 富文本编辑器中的HTML不会被自动提交给服务器，而需要我们手工来提取并提交HTML

2. 为此，可以添加一个隐藏的表单字段，让它的值等于从iframe中提取出来的HTML。

   EventUtil.addHandler(form,"submit",function(event){    event=EventUtil.getEvent(event);    var target=EventUtil.getTarget(event);    target.elements["comments"].value=frames["name1"].document.body.innerHTML;});