《JavaScript高级程序设计》| 第十四章：表单脚本

一、表单基础知识

在JavaScript中，表单对应的是HTMLFormElement类型，该类型继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。
而且，HTMLFormELement也有自己独有的属性和方法：

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

取得<form>元素引用的方式有：

var form = document.getElementById("form1");

var firstForm = document.form[0];		//通过数值索引取得特定的表单

var myForm = document.form['form2'];	//通过"name"值来取得特定的表单

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">

在JavaScript中，调用submit()方法也可以提交表单。而且这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

var form = document.getElementById("myForm");

//提交表单
form.submit();

关于解决重复提交表单问题：
①在第一次提交表单后就禁用提交按钮；
②利用onsubmit事件处理程序取消后续的表单提交操作；

2.重置表单

使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">

<!-- 自定义重置按钮 -->
<button type="reset">Rest Form</button>

也可以通过JavaScript来重置表单：

var form = document.getElementById("myForm");

//重置表单
form.reset();

3.表单字段

每个表单都要elements属性，该属性是表单中所有表单元素(字段)的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段。
每个表单字段在elements集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。

①共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。

• disabled：布尔值，表示当前字段是否被禁用；
• form：指向当前字段所属表单的指针；只读
• name：当前字段的名称；
• readyOnly：布尔值，表示当前字段是否只读；
• tableIndex：表示当前字段的切换序号；
• type：当前字段的类型；
• value：当前字段将被提交给服务器的值。对文件类型来说，这个属性是只读的，包含着文件在计算机中的路径。

②共有的表单字段方法

每个表单字段都有俩个方法：focus()和blur();

• focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件；
• HTML5为表单字段新增了autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。
• blur()方法的作用是从元素中移走焦点，因此使用该方法可以创建只读字段。

③共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列三个事件：

• blur：当前字段失去焦点触发；
• change：对于<input>和<textarea>元素，在他们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发。
• focus：当前字段获得焦点时触发。

---

二、文本框脚本

在HTML中，有俩种方式来表现文本框：一种是使用<input>元素的单行文本，另一种是使用<textarea>的多行文本。
俩者区别在于：不能在HTML中给<textarea>指定最大字符数。
俩种方式都将用户输入的内容保存在value属性中。

1.选择文本

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

①选择(select)事件

与select()方法对应的是一个select事件。在选择了文本框中的文本时，就会触发select事件。

②取得选择的文本

HTML扩展添加了来个属性：selectionStart和selectionEnd。
这俩个属性保存的是基于0的数值，表示所选择的文本范围。

③选择部分文本

setSelectionRange()方法，接收俩个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

2.过滤输入

①屏蔽字符

验证用户输入的文本中包含或者不包含某些字符。

②操作剪切板

6个剪切板事件：

• beforecopy：在发生复制操作前触发；
• copy：在发生复制操作时触发；
• beforecut：在发生剪切操作前触发
• cut：在发生剪切操作时触发；
• beforepaste：在发生粘贴操作前触发；
• paste：在发生粘贴操作时触发；

要访问剪切板中的数据，可以使用clipboardDate对象。
该对象有三个方法：getData()、setData()、clearData()

3.自动切换焦点

为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后自动将焦点换到下一个文本框。

4.HTML约束验证API

HTML5新增功能，在将表单提交到服务器之前验证数据。
浏览器自己会根据标记中的规则执行验证，然后自己显示适当的错误消息(完全不用JavaScript插手)。

①必填字段

在表单字段中指定required属性：
<input type="tetx" name="username" required>

②其他输入类型

<input type="email" name="email">
<input type="url" name="homepage">

"email"类型要求输入的文本必须符合电子邮件地址的模式，而"url"类型必须要求输入的文本必须符合URL的模式。

③数值范围

number、range、datetime、datetime-local、date、month、week、time
对于所有这些数值类型的输入元素，可以指定min属性，max属性和step属性。

④输入模式

HTML5为文本字段新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="d+" name="count">

⑤检测有效性

使用checkValidity()方法可以检测表单中的某个字段是否有效。
字段的值是否有效的判断依据就是上述的字段约束。
返回布尔值。
validity属性对象中包含了一系列属性，用于判断字段是否有效。
customError、patternMismatch、rangeOverflow、rangeUnderflow、stepMisMatch、tooLong、typeMismatch、valid、valueMissing

⑥禁用验证

通过设置novalidate属性，可以告诉表单不进行验证：
<form action="signup.php" method="post" novalidate></form>
如果一个表单有多个提交按钮，为了制定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。

---

三、选择框脚本

选择框是通过<select>和<option>元素创建的。
HTMLSelectElement类型还提供一下属性和方法：

• add(newOption,relOption)：想控件中插入新<option>，其位置在相关项relOption之前；
• multiple：布尔值，表示是否允许多项选择；
• options：控件中所有<option>元素的HTMLCollection；
• remove(index)：移除给定位置的选项；
• selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1。
• size：选择框中可见的行数；

选择框的value属性由当前选中项决定，相应规则如下：

• 如果没有选中的项，则选择框的value属性保存空字符串；
• 如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。
• 如果有一个选中项，但该项的value特性在HTML中未指定，则选择框的value属性等于该文本。
• 如果有多个选中项，则选择框的value属性将根据前俩条规则取得第一个选中项的值。

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

• index：当前选项在option集合中的索引；
• label：当前选项的标签；
• selected：布尔值，表示当前选项是否被选中；
• text：选项的文本；
• value：选项的值；

其他表单字段的change事件是在值被修改且焦点离开当前字段时触发，而选择框的change事件只要选中了选项就会触发。

1.选择选项

var selectedOption = selectbox.options[selectbox.selectedIndex];

selectbox.options[0].selected = true;

在允许多选的选择框中设置选项的selected属性，不会取消对其他选中项的选择，因而可以动态的选中任意多个项。但是，如果在单选选择框中，修改某个选项的selected属性则会取消对其他选项的选择。

2.添加选项

①使用DOM方法：

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.serAttribute("value","Option valeu");
selectbox.appendChild(newOption);

②使用Option构造函数来创建新选项：
option构造函数接受俩个参数：文本(text)和值(value)。

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

③使用选择框的add()方法

var newOption = new Option("Option text","Option value");
selectbox.add(newOption,undefined);

3.移除选项

①使用DOM的removeChild()方法：
selectbox.removeChild(selectbox.option[0]);
②使用选择框的remove()方法：
selectbox.remove(0);
③将相应的选项设置为null
selectbox.option[0] = null;

清除选择框中的所有选项：

function clearSelectbox(selectbox){
	for(var i=0,len=selectbox.options.length;i<len;i++){
		selectbox.remove(0);
	}
}

4.移动和重排选项

如果为DOM的appendChild()方法传入一个文档中已有的元素，那么就会先充该元素的父节点中移除它，再把它添加到指定位置。

---

四、表单序列化

在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。

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

serialize()函数会以查询字符串的格式输出序列化之后的字符串。

---

五、富文本编辑

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

1.使用contenteditable属性

把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
contenteditable属性有三个可能的值：true表示打开；false表示关闭；inherit表示从父元素那里继承。

2.操作富文本编辑器

与富文本编辑器交互的主要方式，就是使用document.execCommand()方法。
该方法可以对文档执行预定义的命令，且该方法传递三个参数：
要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值、执行命令必须的一个值(如果不需要值，则传递null)。
另外有一些与命令相关的方法：
queryCommandEnable()、queryCommandState()、queryCommandValue()

3.富文本选取

在富文本编辑器中，使用框架(iframe)的getSelection()方法，可以确定实际选择的文本。
除此之外，Selection对象还提供其他方法实现对选区的操作：
addRange(range)、collapse(node,offset)、collapseToEnd()、collapseToStart()、containsNode(node)、deleteFromDocument()、extend(node,offset)、getRangeAt(index)、removeAllRanges()、removeRange(range)、selectAllChildren(node)、toString()

4.表单与富文本

因为iframe不是表单控件，因此，通常可以添加一个隐藏的表单字段，让它的值等于从iframe中提取出的HTML。