表单脚本

JavaScript

表单的基础知识

在 JavaScript 中表单对应的是 HTMLFormElement 类型。这个类型继承了 HTMLElement 类型。有以下额外的属性和方法。

• acceptCharest：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
• action：接受请求的 URL；等价于 action 特性。
• elements：表单中所有控件（也可以叫字段或者元素）的集合。

• enctype：请求的编码类型。等价于 enctype 特性。它可以是三个值：

  • application/x-www-form-urlencoded，在发送前编码所有字符；
  • multipart/form-data，不对字符编码，如果表单中包含文件就必须使用这种编码类型。
  • text/plain，将空格编码为+，不对特殊字符进行编码。

• length：表单中控件的数量。

• method：要发送的 HTTP 请求类型，通常是“get”或“post”，前者为整体传输，后者为分段传输；等价于 method 特性。
• name：表单的名称，等价于 name 特性。
• reset()：将所有表单域重置为默认值。
• submit()：提交表单。
• target()：用于发送请求和接受响应的窗口名称。

通过 document.forms 可以取得页面中所有的表单，再通过索引找到相应的表单。

提交表单

提交表单既可以通过将<input>的 type 特性设置为 submit 来实现，也可以通过调用 submit()方法来提交。在通过<input type="submit">提交表单之前会触发 submit 事件，这样就可以通过取消默认事件来阻止表单的提交。在通过调用 submit()方法提交表单时不会触发 submit 事件。在编写表单时必须要防止重复提交，可以禁用提交按钮，也可以利用 onsubmit 事件取消后续提交行为。

重置表单

与提交不同的是调用 reset()方法依然会触发 reset 事件。

表单字段

表单的 elements 属性中保存了表单的所有字段，它是一个 HTMLCollection，既可以通过位置访问也可以通过 name 特性访问。如果多个表单控件在使用同一个 name 特性，那么会返回一个 NodeList。

共有表单字段属性

不同的字段拥有不同的属性，以下是一些各种字段共有的属性（<fieldset>元素除外）

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前表单。
• name：字段的名字。
• readOnly：布尔值，表示当前字段是否为只读。
• tabIndex：表示当前字段的切换（tab）序号。

• type：当前字段的类型。字段类型有以下几种

  • text：文本字段
  • password：密码
  • hidden：隐藏域
  • textarea：文本区域
  • checkbox：复选框
  • radio：单选按钮
  • select：选择列表
  • image：图像域
  • file：文件域
  • button：按钮
  • submit：提交按钮

• value：当前字段的值。

共有的表单字段方法

所有表单字段都有 focus()方法和 blur()方法。foucs()方法将浏览器的焦点设置到表单字段，如果这个表单字段对于用户不可见那么就会出现错误。blur()方法将用户的焦点移开。

共有的表单字段事件

除了基本的事件以外，所有的表单字段还具有以下几个事件。
- blur：当前字段失去焦点时触发。
- change：对于<input>元素和<textarea>元素，在他们失去焦点且 value 发生改变时触发。对于<select>元素，在选项改变时触发。
- focus：当前字段获得焦点时触发。

文本框脚本

文本框有两种，<input type="text">和<textarea>。前者为单行文本框，可以通过 size 特性设置能够显示的字符数，通过 value 特性设置默认值，通过 maxlength 特性设置最大字符数。后者为多行文本框，可以通过 rows 和cols 特性设置字符行数和字符列数。
在处理文本框的值时候最好不要使用 DOM 方法，使用 DOM 方法可能会失效。最好使用 .value 来修改。

选择文本

这两种文本框都支持 select()方法，这个方法用于选择文本框的所有文本。调用这个方法之后浏览器会自动将焦点设置到文本框中。

选择事件

select 事件在选择了文本框中的文本时触发，一般来说会在用户选择文本并且释放了鼠标的之后触发，IE8或以下中只要选择了一个字母不必释放鼠标就会触发。

取得选择的文本

通过 selectionStart 属性和 selectionEnd 属性可以取得用户选区的偏移量。通过 substring()方法可以取得用户选择的文本。

选择部分文本

setelectionRange()方法接受两个参数，第一个字符的索引和最后一个字符的索引。要看到选择的文本必须要在选取部分文本之前将焦点设置到文本框中。

过滤输入

屏蔽字符

可以通过监听 kepress 事件并且在特定情况下取消默认行为来屏蔽某些字符。可以直接通过 charCode 字符编码来判断，也可以转换成为字符串再判断。但是要注意的是不要屏蔽一些组合快捷键，比如 Ctrl+C。

操作剪贴板

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

取消"beforecopy""beforecut""beforepaste"事件并不会取消对剪贴板的操作，只有取消"copy""cut""paste"才能够阻止相应的事件。
要访问剪贴板数据可以访问 clipboardData 对象，在 IE 中这个对象是 window 对象的属性，可以随时访问，而在其他浏览器中这个对象是相应的事件对象的属性，只在触发剪贴板事件时能够访问。clipboardData 对象有三个方法

• getData()：取得剪贴板的数据，这个方法接受一个参数，取得数据的格式，可以是“text”或者“URL”。
• setData()：传入剪贴板，这个方法接受两个参数，第一个参数是数据格式，第二个参数是要放置在剪贴板中的文本。
• clearData()：清楚剪贴板，这个方法接收一个参数，即要删除的数据的格式。

在设置了屏蔽字符的情况下需要注意监听剪贴板事件，防止应该被屏蔽的自负被粘贴进来。

自动切换焦点

javascript 可以从多个方面增强表单字段的易用性，其中一种常见的方式就是用户填写完当前字段后自动将焦点转移到下一个字段。对文本框的键盘事件进行监听，然后比较文本框中内容长度和文本框的 maxlength 特性，如果相同就查找下一文本框并转移焦点。

HTML5约束验证 API

在 HTML5中也规定了一些表单约束的 API

必填字段

为表单字段指定 required 属性

<input type="text" name="username" required>

使用以下代码可以测试浏览器是否支持 required 属性。

var isRequiredSupported = "required" in document.createElement("input")

其他输入类型

HTML5新增了几个输入类型，其中用得比较多的类型是"email"和"url"，旧版本浏览器会将未知的类型设置为"text"。

数值范围

对于所有的数值类型的输入元素可以通过 min 属性和 max 属性来限制数值范围。

输入模式

HTML5为文本字段新增了 pattern 属性，这个属性的值是一个正则表达式，文本框中的内容必须与该正则表达式从头到尾匹配，因此这个正则表达式中不需要"$"和"^"。指定这个属性也不会阻止用户输入无效的文本。

检测有效性

所有表单字段都有 checkValidity()方法，这个方法可以检测表单中某个字段是否有效，有效返回 true，无效返回 false。必填字段中没有值就是无效的，字段中的值与 pattern 属性不匹配就是无效的。也可以对表单自身调用这个方法，如果有一个字段无效则返回 false，全部有效则返回 true。
validity 属性会告诉你为什么字段有效或者无效。这个对象中包含一系列属性，每个属性返回一个布尔值。

• customError：如果设置了 setCustomValidity()，返回 true。
• patternMismatch：如果值与 pattern 属性不匹配，返回 true。
• rangeOverflow：如果值超过了 max 值，返回 true。
• rangeUnderflow：如果值小于 min 值，返回 true。
• stepMisMatch：如果 max 值与 min 值之间的步长值不合理，返回 true。
• tooLong：如果值的长度超过了 maxlength 属性指定的长度，返回 true。
• typeMismatch：如果值不是"mail"和"url"要求的格式，返回 true。
• valid：如果其他属性都为 false，返回 true。
• valueMissing：如果标注为 required 的字段中没有值，返回 true。

禁用验证

通过设置 novolidate 属性，可以告诉表单不用验证。也可以在提交按钮上指定这个属性，指定之后通过该按钮进行的提交奖不会验证。

<form method="post" action="signup.php" novalidate>

也可以在 javascript 中设置表单的 noValidate 属性。

选择框脚本

HTMLSelectElement 类型提供了以下额外的属性和方法。

• add(newOption, relOption)：在相关项之前（relOption）插入新<option>元素，如果不传入第二个参数，那么会添加到最后一项。
• multiple：是否允许多选，等价于 multiple 特性。
• options：包含控件中所有元素的 HTMLCollection。
• remove(index)：移除给定位置的选项。
• selectedIndex：选中的选项的索引，如果没有选择则为-1.在多选的情况下只显示第一项。
• size：选择框中可见的行数，等价于 size 特性。
• type：表示是否支持单选，值为"select-one"或者"select-multiple"
• value：value 的值为当前选择项的 value 特性，如果该项没有 value 特性那么就保存该项的文本。多选时只保存第一项，没有选择时为空。

每个<option>元素都有一个 HTMLOptionElement 对象表示，这个对象有以下属性。
- index：这个对象跟在 option 集合中的索引。
- label：当前选项的标签，等价于 label 特性。(选项的简短版本，仅在 IE7+中支持)
- selected：表示当前选项是否被选中，设置为 true 可以选中当前项。
- text：选项的文本。
- value：选项的值，等价于 value 特性。

选择选项

对于单选的选择框可以修改选择框的 selectedIndex 属性来选择某一项，而在多选框中就需要直接修改某一项的 selected 属性来选择。

添加选项

添加选项有三种方式。

• 使用 DOM 方法添加。
• 使用 Option 构造函数来添加。Option 构造函数接受两个参数，选项的 text 属性和 value 属性。这个构造函数的返回值是一个<option>元素，因此可以直接使用 appendChild()添加。
• 使用选择框的 add()方法。

移除选项

移除选项同样也是三种方式。

• 使用 DOM 方法移除。
• 使用选择框的 remove()方法。
• 在选择框的 options 属性中将相应项设置为 null。selectbox.option[0] = null

移动和重排选项

使用 DOM 方法移动。

表单序列化

表单在提交之前需要被转换为键值对的形式方便服务器解析。

• name=value 的形式，多个键之间通过&分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选框。
• 不发送 type 为"reset"和"button"按钮。
• 多选框中每个选中的值单独一个条目。
• 在单击按钮提交表单时会将按钮一并提交。
• <select>元素的值是选中项的 value 值，没有 value 值的情况下就是选中项的文本。

在序列化时通常要忽略文件字段，因为文件字段在表单提交时会包含文件内容。
<fieldset>元素也会出现在元素集合中，但是它没有 type 特性，因此可以检查 type 特性来排除这个元素。

富文本编辑

对于 HTML 中的框架，通过设置 designMode 属性，可以将这个文档变为可编辑。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>index.html</title>
</head>
<body>
    <iframe name="richtext" style="height: 500px;width:500px;" src="blank.html"></iframe>
    <script type="text/javascript">
        frame["richtext"].document.designMode="on";
    </script>
</body>
</html>

这个框架引入的文档可以非常简单，但是必须要声明编码方式。

使用 contenteditable 属性

另外一种编辑富文本的内容的方式是为元素设置 contenteditable 属性。

<div contenteditable></div>

同样也可以通过 JS 来设置这个属性，设置"true"表示打开。

操作富文本

与富文本编辑器交互的主要方式就是 document.execCommand()方法，这个方法接受三个参数，命令名称、表示浏览器是否为当前命令提供用户界面的布尔值和执行命令必须的一个值（如果不需要值，则传递 null）。为保证兼容性，第二个值应始终保持为 false。

frame["richtext"].document.execCommand("bold",false,null);

下面是一些支持比较多的命令。

除了命令之外还有一些与命令相关的方法。
- queryCommandEnable()：这个方法接受一个命令，检测指定命令是否可以执行，如果允许执行则返回 true，不能则返回 false。
- queryCommandState()：这个方法接受一个命令，检测指令是否已经到了选择的文本，如果已经应用了则返回 true，没有则返回 false。
- queryCommandValue()：这个方法接受一个命令，返回之前执行命令时传入的值。

富文本选区

使用框架的 getSelection()方法返回一个 Selection 对象，每个 Selection 对象都有下列属性和方法。

• anchorNode：选区起点所在节点。
• anchorOffset：选区起点的偏移量，即在到达选区起点位置之前跳过的字符数量。
• focusNode：选区终点所在的节点。
• focusOffset：选区终点的偏移量。
• isCollapsed：布尔值，表示选区起点和终点是否重合。
• rangeCount：选区中包含的 DOM 范围的数量。
• addRange()：将指定的 DOM 范围添加到选区中。
• collapse(node, offset)：将选区折叠到指定节点中相应的文本偏移位置。
• collapseToEnd()：将选区折叠到终点位置。
• collapseToStart()：将选区折叠到起点位置。
• containsNode(node)：确定指定节点是否包含在选区中。
• deleteFormDocument：从文档中删除选区的文本，等同于 delete 命令。
• extend(node, offset)：移动选区终点来扩展选区。
• getRangeAt(index)：返回索引对应选区中的 DOM 范围。
• removeAllRanges(range)：从选区中移除指定的 DOM 范围。
• selectAllChildren(node)：清除选区并选择指定节点的所有子节点。
• toString()：返回选区所包含的文本内容。

表单与富文本

富文本的内容不会被自动提交到服务器，需要手动提取富文本的 innerHTML 然后填充到表单的某一字段中，然后再提交。