add : 添加第十四章 - 表单脚本

Author: bytebit8

Chapter14 - Scripting Forms/表单脚本.md

@@ -32,7 +32,7 @@
 * document.querySelector()
 * document.querySelectorAll()
 
-**使用快捷属性： `document.forms` **
+**使用快捷属性：document.forms**
 
 `document.forms` 属性在 DOM0 级之前便已存在，它可以获取文档中所有的表单元素，返回值是一个 `HTMLCollection` 类型的集合对象。
 
@@ -49,9 +49,11 @@ document.forms["myname"]; //根据name属性的值获取指定的表单元素。
 触发提交表单的方式有三种：
 
 **键盘按键行为**
+
 当表单中任意一个表单控件（字段）元素获得焦点时（ `<textarea>` 元素除外），敲击键盘上的回车键(enter)便可以触发表单提交。
 
 **点击提交按钮**
+
 在表单元素中 `<button>` 标记或者指定 `type="submit"` 的按钮都被认为是提交按钮。
 
 ``` html
@@ -61,6 +63,7 @@ document.forms["myname"]; //根据name属性的值获取指定的表单元素。
 ```
 
 **表单提交方法**
+
 使用 JS 来调用表单元素对象的 `submit()` 方法来提交表单。
 
 ``` js
@@ -90,6 +93,7 @@ document.forms[0].submit();
 ```
 
 **表单的重置方法**
+
 JS 调用表单元素对象的 `reset()` 方法便可以触发表单重置
 
 这两种方式的区别在于最后一种不会触发表单的 `onreset` 事件，通常我们可以调用其事件对象的 `preventDefault()` 方法来决定是否阻止表单的重置操作。
@@ -118,14 +122,15 @@ firstField == colorFields[0]; //true
 ```
 
 **表单字段共有的属性**
+
 除了 `fieldSet` 元素之外，所有表单字段元素都具有以下属性：
 
 * name : 表单字段元素名称。
 * value : 表单字段元素的值。
 * disable : 布尔值，禁用该表单字段。
 * readyonly: 布尔值，表示当前字段元素是否只读。
 * type : 表单字段元素的类型。
-* tabIndex : 表单字段tab键切换的顺序
+* tabIndex : 表单字段 tab 键切换的顺序
 * form : 读取或设置该表单字段元素所属的表单对象，常用于表单之外的表单字段元素。
 * autofocus : 页面加载时是否获得焦点。
 
@@ -146,7 +151,7 @@ if (input.autoFocus !== true) {
 }
 ```
 
-在早期的WEB技术中我们会利用 `blur()` 方法失去焦点的特性来模拟 `readyonly` 属性的效果：
+在早期的 WEB 技术中我们会利用 `blur()` 方法失去焦点的特性来模拟 `readyonly` 属性的效果：
 
 ``` JS
 // JavaScript
@@ -155,7 +160,7 @@ document.forms[0].elements[0].blur();
 
 **表单字段共有的事件**
 
-除了支持键盘，鼠标和HTML事件之外，所有的表单元素都支持以下3个事件：
+除了支持键盘，鼠标和 HTML 事件之外，所有的表单元素都支持以下 3 个事件：
 
 * blur: 当字段元素失去焦点时触发。
 * change : 对于 `<input/>` 与 `<textarea>` 等标记而言会在其失去焦点且 `value` 属性的值发生改变时触发，而对 `<select>` 而言当选项发生改变时就会触发。
@@ -164,6 +169,7 @@ document.forms[0].elements[0].blur();
 调用表单字段元素的 `focus()` 或 `blur()` 方法会触发对应的 `onfocus` 与 `onblur` 事件，这一点与调用表单的提交/重置方法有很大区别。
 
 **总体概览**
+
 ![](./images/表单字段元素.png)
 
 ## 文本框脚本
@@ -193,9 +199,11 @@ document.forms[0].elements[0].blur();
 ### 选择方法与事件
 
 **select()**
+
 调用文本框的 `select()` 方法可以全选文本框中的内容。
 
 **select**
+
 使用鼠标或调用 `select()` 方法选择文本框中的内容都可以触发文本框的选择事件。
 
 ### 取得选择的内容
@@ -215,11 +223,11 @@ function getSelectedText(textbox) {
 }
 ```
 
-> 实际上也可以通过标准DOM选取对象来获取选择的内容 `document.getSelection().toString()` 
+> 实际上也可以通过标准 DOM 选取对象来获取选择的内容 `document.getSelection().toString()` 
 
 ### 选择部分内容
 
-使用JS主动选择文本框中的部分内容需要借助于HTML5为文本框新增的 `setSelectionRange(start,?end)` 方法，它接收两个参数，分别是选区范围的起始于结束位置。
+使用 JS 主动选择文本框中的部分内容需要借助于 HTML5 为文本框新增的 `setSelectionRange(start,?end)` 方法，它接收两个参数，分别是选区范围的起始于结束位置。
 使用形式上与 `substring()` 完全相同。
 
 ``` JS
@@ -230,7 +238,7 @@ textbox.focus();
 
 > 要想看到选择效果，必须要在调用 `setSelectionRange()` 方法之前或之后为文本框获得焦点。
 
-IE8及以下版本可以使用IE为文本框提供的私有方法 `createTextRange()` 方法，来基于文本框创建一个文本范围对象。
+IE8 及以下版本可以使用 IE 为文本框提供的私有方法 `createTextRange()` 方法，来基于文本框创建一个文本范围对象。
 
 ``` JS
 // JavaScript
@@ -269,16 +277,16 @@ if (!/\d+/.test(String.fromCharCode(keyCode)) && !event.ctrlKey) {
 目前各浏览器支持较为完善的剪贴板事件有以下三个：
 
 * **copy** : 在发生复制时触发，包括键盘快捷键(ctrl+c)、右键菜单、执行 `document.execCommand('copy')` 命令。
-* **cut**  : 在发生剪切时触发，包括键盘快捷键(ctrl+x)、右键菜单、执行 `document.execCommand('cut')` 命令。
+* **cut** : 在发生剪切时触发，包括键盘快捷键(ctrl+x)、右键菜单、执行 `document.execCommand('cut')` 命令。
 * **paste** : 在发生粘贴时触发，包括键盘快捷键(ctrl+v)、右键菜单。
 
-为了防止对剪贴板的未授权访问，只有在剪贴板事件期间其事件对象(event)的 `clipboardData` 对象才有效，而在IE中， `clipboardData` 对象是作为 window 对象的全局属性，它可以随时被访问到，因此一直有效。
+为了防止对剪贴板的未授权访问，只有在剪贴板事件期间其事件对象(event)的 `clipboardData` 对象才有效，而在 IE 中， `clipboardData` 对象是作为 window 对象的全局属性，它可以随时被访问到，因此一直有效。
 
 `clipboardData` 对象提供了三个常用的方法，用以访问与操作剪贴板内容，但需要注意的是这些方法在不同时期的事件中时有一定差异与限制的。
 
 **getData(format)**
 
- 从剪贴板中取得数据，其中 `format` 参数是要取得数据的格式。在 IE 中只有 `text` 和 `URL` 两种格式，而在现代浏览器中既可以兼容 `text` 类型也可以是具体的 MIME 类型，例如 `text/plain` 。
+从剪贴板中取得数据，其中 `format` 参数是要取得数据的格式。在 IE 中只有 `text` 和 `URL` 两种格式，而在现代浏览器中既可以兼容 `text` 类型也可以是具体的 MIME 类型，例如 `text/plain` 。
 
 > 注意：无法在 `copy` 或者 `cut` 事件中单独使用该方法，但可以结合 `setData()` 一起使用。
 
@@ -293,7 +301,7 @@ input.addEventListener('copy', function(event) {
 
 **setData(format, value)**
 
-设置剪贴板中的数据，相同的 `format` 参数在IE中只支持 `text` 与 `URL` 。而现代浏览器中只支持 MIME 类型并不能像 `getData()` 方法那样还可以识别 `text` 类型。
+设置剪贴板中的数据，相同的 `format` 参数在 IE 中只支持 `text` 与 `URL` 。而现代浏览器中只支持 MIME 类型并不能像 `getData()` 方法那样还可以识别 `text` 类型。
 
 > 注意： 该方法只能在 `copy` 与 `cut` 事件中使用，无法使用于 `paste` 事件。
 
@@ -322,11 +330,11 @@ if (!/\d+/.test(event.clipboardData.getData("text"))) {
 }
 ```
 
-### HTML5中的文本框
+### HTML5 中的文本框
 
 #### 更多的输入类型
 
-HTML5为 `<input>` 的 `type` 属性新增了以下属性：
+HTML5 为 `<input>` 的 `type` 属性新增了以下属性：
 
 * 数值类型：number | range
 * 日期时间类型：date | time | week | month | local-datetime
@@ -338,11 +346,11 @@ HTML5为 `<input>` 的 `type` 属性新增了以下属性：
 其中为数值类型扩展增加了以下属性与方法：
 
 * 数值类型：number | range
-    - min : 范围最小值。
-    - max : 范围最大值。
-    - step : 改变的步长值。
-    - stepUp() : 在当前值的基础上增加指定的值，默认每次调用加1。
-    - stepDown() : 在当前值的基础上减去指定的值，默认每次调用减1。
+  + min : 范围最小值。
+  + max : 范围最大值。
+  + step : 改变的步长值。
+  + stepUp() : 在当前值的基础上增加指定的值，默认每次调用加 1。
+  + stepDown() : 在当前值的基础上减去指定的值，默认每次调用减 1。
 
 ``` HTML
 <!-- HTML -->
@@ -361,7 +369,7 @@ button.onclick = function() {
 };
 ```
 
-#### 约束验证API
+#### 约束验证 API
 
 1. 必填项
 
@@ -390,7 +398,7 @@ if ('pattern' in document.createElement('input')) {
 
 3. 检测有效性
 
-使用 `checkValidity() ` 方法可以检测表单元素或表单字段元素的有效性，返回值为布尔值， `true` 表示验证通过， `false` 表示无效。
+使用 `checkValidity()` 方法可以检测表单元素或表单字段元素的有效性，返回值为布尔值， `true` 表示验证通过， `false` 表示无效。
 
 ``` JS
 // JavaScript
@@ -457,51 +465,64 @@ console.log(document.forms[0].novalidate);
 `select` 元素是 `HTMLSelectElement` 类型的实例，除了拥有所有表单字段元素共有的属性和方法外，它还提供了以下独有的属性与方法：
 
 **options**
+
 保存了该 `select` 元素内的所有 `option` 元素的集合，返回值是一个 `HTMLCollection` 
 类型的动态集合对象。
 
-**multiple** 
+**multiple**
+
 布尔值，是否允许多选，它的取值会影响 `type` 属性的值，如果为“真”时 `type` 属性的值为 `select-multiple` ，如果为“假”时则为 `select-one` 。
 
-**size** s
+**size** 
+
 选择框的行高（行数），类似于 `<textarea>` 元素的 `rows` 属性。
 
-**selectedIndex** 
-可读可写，读取时返回选择中已选择项的位置索引，当返回值为-1是则表示没有选中项；写入时，传入指定选项的位置索引便可以在选择框中将其置为选中状态。
+**selectedIndex**
+
+可读可写，读取时返回选择中已选择项的位置索引，当返回值为-1 是则表示没有选中项；写入时，传入指定选项的位置索引便可以在选择框中将其置为选中状态。
+
+**value**
 
-**value** 
 该属性是表单字段元素共有的属性，但在选择框中其取值较为特殊，遵循以下规则：
 
 1. 如果选择框没有选中项，那么 `value` 属性的取值为“空字符串”。
 2. 如果选择框有一个或多个选中项，那么选择框的 `value` 属性值则是所有选中项中的第一个选中项(option)的 `value` 属性的值，哪怕是这个选中项的 `value` 属性值为空字符串。
 3. 如果选中项的 `value` 属性未定义(undefined)或不存在(null)，则取该选中项(option)的 `text` 属性的值。
 
 **add(newOption, relOption?)**
+
 向选择框中加入一个新选项(newOption)，并将其插入到指定选项(relOption)之前。
 
 **remove(optionIndex)**
+
 移除选择框中指定位置索引的选项。
 
 在 DOM 中选择框内的每个选项 —— `option` 元素，都是 `HTMLOptionElement` 类型的实例，为便于访问数据 `HTMLOptionElement` 类型的原型对象上添加了以下的属性：
 
 **index**
+
 该选项在选择框中的位置索引，返回值为数值型。
 
 **text**
+
 选项的文本。
 
 **value**
+
 选项的值。（也是所有表单字段元素共有的属性值）
 
 **selected**
+
 布尔值，该选项是否被选中。
 
 一个或多个 `<option>` 选项可以放在 `<optgroup>` 中作为一个整体的“选项组”。它是 `HTMLOptGroupElement` 类型的实例，为了便于对选项组的整体进行操作， `HTMLOptGroupElement` 类型提供了以下属性：
 
 **disabled**
+
 布尔值，禁用整个选项组。
 
 **label**
+
 读取或设置选项组的标签名称。
 
 ``` JS
@@ -569,7 +590,7 @@ function getSelectedOption(select) {
 
 ### 添加选项
 
-创建选项（option）对象的方式有两种，使用标准DOM技术提供的 `document.createElement(tagName)` 方法，以及使用DOM0级便已经存在的 `Option()` 构造函数。
+创建选项（option）对象的方式有两种，使用标准 DOM 技术提供的 `document.createElement(tagName)` 方法，以及使用 DOM0 级便已经存在的 `Option()` 构造函数。
 
 `Option(text,value)` 构造函数接受两个参数，分别是选项实例的“文本(text)”与“值(value)”。
 
@@ -579,7 +600,7 @@ document.createElement('option');
 new Option("red", "rgb(255,0,0)");
 ```
 
-向选择框中添加选项的方式也有两种，标准DOM技术提供的 `appendChlid()` 方法，以及 `select` 元素对象自身的 `add(newOption,relOption)` 方法。
+向选择框中添加选项的方式也有两种，标准 DOM 技术提供的 `appendChlid()` 方法，以及 `select` 元素对象自身的 `add(newOption,relOption)` 方法。
 
 ``` JS
 // JavaScript
@@ -589,7 +610,7 @@ select.add(option3, option2); //在option2选项之前新增一个option3选项
 ```
 
 下面是它们的具体实现：
-标准DOM技术
+标准 DOM 技术
 
 ``` JS
 // JavaScript
@@ -614,7 +635,7 @@ select.add(option, undefined);
 
 ### 移动选项
 
-利用DOM元素在文档中的唯一性（对文档中已存在的元素进行移动，会先从该元素的父节点中移除它，然后再添加到指定的位置）。我们可以使用标准DOM技术提供的 `insertBefore(newNode,Node)` 方法进行移动。或者使用私有的 `add()` 方法添加指定选项之前。
+利用 DOM 元素在文档中的唯一性（对文档中已存在的元素进行移动，会先从该元素的父节点中移除它，然后再添加到指定的位置）。我们可以使用标准 DOM 技术提供的 `insertBefore(newNode,Node)` 方法进行移动。或者使用私有的 `add()` 方法添加指定选项之前。
 
 ``` JS
 // JavaScript
@@ -656,7 +677,7 @@ select.remove(); //参数为空，表示删除整个 select 元素节点。
 >
 > 3. 选择框有多个选中项则每个选中项都是单独一个条目。
 >
-> 4. `<select>` 元素的值是选中项 `<option>` 的 `value` 值，如果选中项没有 `value` 属性，则去该选项的文本值 `text` 。
+> 4. `<select>` 元素的值是选中项(option)的 `value` 值，如果选中项没有 `value` 属性，则取该选项的文本值(text) 。
 >
 > 5. 单击提交按钮提交表单的情况下也会发送提交按钮，否则不发送，包括 `type` 为 `image` 的图片按钮。
 
@@ -736,7 +757,7 @@ iframe.document.designMode = 'on';
 
 相比于 `designMode` 属性 `contentEditable` 属性可以作用在所有的 HTML 标签上，因此便无需结合内联框架（iframe） 就可以实现页面局部的富文本编辑功能。
 
-设置标签元素的 `contentEditable` 属性既可以使用JS方式，也可以使用 HTML 标签属性的方式：
+设置标签元素的 `contentEditable` 属性既可以使用 JS 方式，也可以使用 HTML 标签属性的方式：
 
 ``` JS
 // JavaScript
@@ -753,7 +774,8 @@ element.contentEditable = true;
 与富文本编辑器的交互实际上就是对（富文本编辑器）选取内容的操作。
 `document` 对象提供了以下几个方法，用于便捷的对文档选区的内容进行操作：
 
-**document.execCommand(cmdkey, false, cmdvalue)** 
+**document.execCommand(cmdkey, false, cmdvalue)**
+
 对文档选区执行一些列命令操作。
 该方法可操作的命令列表，可查看该链接：[MDN - document.execCommand](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand)
 
@@ -762,9 +784,11 @@ element.contentEditable = true;
 检查指定的命令是否可用，注意该方法会对 `paste` 命令也返回 `true` ，但实际上并不可用。
 
 **document.queryCommandState(cmdkey)**
+
 检查传入的命令是否已经应用于该选区内容上。
 
 **document.queryCommandValue(cmdkey)**
+
 从选区内容中返回上次执行命令所传入的值。
 
 若想对选区内容做到更加细化的控制，则需要使用“选区对象”。
@@ -793,10 +817,10 @@ oSpan.appendChild(document.createTextNode(selectionText));
 range.surroundContents(oSpan);
 ```
 
-对于IE低版本则可以使用IE专有的选区对象以及基于选区创建范围方式来兼容实现。
+对于 IE 低版本则可以使用 IE 专有的选区对象以及基于选区创建范围方式来兼容实现。
 
 ``` js
-document.selection.createRange(); 
+document.selection.createRange();
 //基于当前的选区创建一个范围，如果想对选区内容更细化的操作，只需要操作这个范围对象即可。
 ```