《JavaScript 高级程序设计》 第十九章 表单脚本 学习记录

1、表单基础

• <form>标签，HTMLFormELement的属性和方法
  • acceptCharset 服务器科技手段字符集（accept-charset）
  • action 请求的URL
  • elements 表单中所有控件的HTMLCollection
  • enctype 请求的编码类型
  • length 表单中控件数量
  • method HTTP请求方法
  • name 表单名字
  • reset() 将表单字段重置为默认值
  • submit() 提交表单
  • target 用于发送请求和接收响应的窗口的名字
• document.forms 可以获得所有表单元素

1、提交表单

• 通过用户点击提交按钮或图片按钮提交

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">

<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

<!-- 图片按钮 -->
<input type="image" src="graphic.gif">
复制代码

• 上面的按钮，焦点在某个控件上，回车也可以提交

let form = document.getElementById("myForm")
form.addEventListener("submit", (event)=> {
  // 阻止表单提交
  event.preventDefault()
})
复制代码

• 通过JS主动调用 form.submit()，不会触发submit事件
• 防止多次提交，可以提交后禁用提交按钮或者通过事件处理程序取消之后的提交

2、重置表单

• 用户点击重置按钮提交

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button> 
复制代码

• 恢复默认值，触发reset事件

let form = document.getElementById("myForm")
form.addEventListener("reset", (event)=> {
  // 阻止表单提交
  event.preventDefault()
})
复制代码

• 通过JS主动调用 form.reset()，也会触发reset事件

3、表单字段

• elements集合是一个有序列表，包含<input>、<textarea>、<button>、<select>和<fieldset>元素
• 可以通过索引位置或name属性来访问
• 如果多个表单控件使用一个name，会返回所有同名元素的HTMLCollection集合

1、表单字段的公共属性

• 除了<fieldset>外，表单字段都有一组相同的属性

  • disabled：布尔值，表示表单字段是否禁用
  • form：指针，指向表单字段所属的表单，只读
  • name：字符串，这个字段的名字
  • readOnly：布尔值，表示这个字段是否只读
  • tabIndex：数值，表示这个字段在按Tab键时的切换顺序
  • type：字符串，表示字段类型，如”checkbox”、”radio”等
  • value：要提交给服务器等字段值。对文件输入字段来说，这个属性是只读的，仅包含计算机上某个文件的路径。

• type可以用于除了<fieldset>外任何字段，对于<input>，这个值等于HTML的type属性，对其他元素：

  描述	示例HTML	类型的值
  单选列表	<select>...</select>	select-one
  多选列表	<select multiple>...</select>	select-mutiple
  自定义按钮	<button>...</button>	submit
  自定义非提交按钮	<button type="button">...</button>	button
  自定义重置按钮	<button type="reset">...</button>	reset
  自定义提交按钮	<button type="submit">...</button>	submit

2、表单字段的公共方法

• focus()把浏览器焦点设置到表单字段
  • HTML5新增autofocus属性，支持自动设置焦点
• blur()从元素上移除焦点

3、表单字段公共事件

• blur ：在字段失去焦点时触发
• change：在<input>和<textarea>元素的value发生变化且失去焦点时触发，或者在<select>元素中选中项发生变化时触发
• focus：在字段获得焦点时触发

2、文本框编程

• <input> 默认显示文本框
  • 省略type属性会以text作为默认值
  • size属性指定文本框宽度，以字符数计算
  • value指定文本框初始值
  • maxLength：指定文本框允许的最多字符数
• <textarea>总是会创建多行文本
  • rows指定这个文本框高度，字符数计量
  • cols指定这个文本框宽度，字符数计量
  • 初始值必须在标签之间

1、选择文本

• 两种文本框都支持select()方法，用来全部选中文本框的文本

1、select事件

• 当选中文本框中的文本或调用select()方法时，会触发select事件

2、取得选中文本

• selectionStart、selectionEnd，分别表示文本选区的起点和终点

function getSelectedText(textbox) {
  return textbox.value.substring(textbox.selectionStart,
                                textbox.selectionEnd)
}
复制代码

• IE老版本 document.selection.createRange().text

3、选中部分文本

• setSelectionRange()
  • 参数：要选择的第一个字符的索引，停止选择的字符的索引
• IE老版本
  • createRange()创建范围
    • 使用collapse()把范围折叠到文本框的开始
    • moveStart()、moveEnd()范围方法确定范围。
    • 使用select()选中文本

2、输入过滤

1、屏蔽字符

• keypress屏蔽输入的字符，如屏蔽非数字

  • 同时避免屏蔽功能键，Ctrl组合键

  textbox.addEventListener('keypress',(event)=> {
    if(!/\d/.test(String.formCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {
      event.preventDeafult()
    }
  })
  复制代码

2、处理剪贴板

• 与剪切板相关的事件：

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

• 剪贴板的数据可以通过window或event对象的clipboardData对象获取

  • getData()
    • 从剪切板检索字符串数据，接收一个要检索的数据格式参数
      • IE text/URL
      • 其他 MIME text -> text/plain
  • setData()
    • 参数：指定数据类型，要放到剪贴板上的文本
      • IE text/URL
      • 其他 MIME
  • clearData()

• 在paste事件中，可以确定剪贴板上的文本是否有效，如果无效旧取消默认行为

3、自动切换

• 完成前面字段时自动切换到下一个字段
• 可以在完成最大输入允许输入字符数时通过foucs()自动切换焦点。

4、HTML5约束验证API

1、必填字段

• required，如果没有填写会阻止表单提交

2、更多输入类型

• <input>新的type值
  • email 要求输入电子邮箱地址
  • url 确保输入的文本匹配URL
  • 除非设置了required否则传空字段是有效的。

3、数值范围

• 期待某种数值输入的type：number、range、datetime、datetime-local、date、month、week和time
• 可以指定min、max、step属性
• stepUp()、stepDown() 接收一个可选参数，从当前值加上或减去的数值，默认1

4、输入模式

• pattern属性，指定正则表达式，限制输入匹配的字符
• 只会在提交的时候验证

5、检测有效性

• checkValidity()检测表单中任意给定字符是否有效
• 如检测是否必填，是否匹配pattern属性
• 可以直接检测整个表单是否有效
• validity属性
  • customError：如果设置了 setCustomValidity()就返回 true，否则返回 false。
  • patternMismatch：如果字段值不匹配指定的 pattern 属性则返回 true。
  • rangeOverflow：如果字段值大于 max 的值则返回 true。
  • rangeUnderflow：如果字段值小于 min 的值则返回 true。
  • stepMisMatch：如果字段值与 min、max 和 step 的值不相符则返回 true。
  • tooLong：如果字段值的长度超过了 maxlength 属性指定的值则返回 true。
  • typeMismatch：如果字段值不是”email”或”url”要求的格式则返回 true。
  • valid：如果其他所有属性的值都为 false 则返回 true。与 checkValidity()的条件一致。
  • valueMissing：如果字段是必填的但没有值则返回 true

6、禁用验证

• novalidate 属性禁止任何验证
  • 可以通过JS属性noValidate检索或设置
• `formnovalidatae 指定通过该按钮提交无须验证
  • 可以通过JS属性formNoValidate设置

3、选择框编程

• <select>、<option>元素创建的。
• HTMLSelectElement额外属性方法：
  • add(newOption, relOption)：在relOption前向控件添加新<option>
  • multiple：布尔值，是否允许多选
  • options：控件中所有<option>元素集合
  • remove(index)：移除指定位置的选项
  • selectedIndex：选中项基于0的索引值，如果没有选择项返回-1。多选返回第一个选项
  • size：选择框中可见的行数
• 选择框的value属性规则：
  • 没有选中值，则选择框的值时空字符串
  • 如果有一个选中项，且其value属性有值，则选择框的值就是选中项value属性的值。
  • 如果有一个选中项，且其value属性没有值，则选择框的值时该项的文本内容。
  • 如果有多个选中项，则选择框的值根据前两条规则取第一个选中项的值
• HTMLOptionElement有以下属性
  • index：选项在option集合中的索引
  • label：选项的标签
  • selected：布尔值，表示是否选中了当前选项
  • text：选项中的文本
  • value：选项的值

1、选项处理

• 只允许选择一项的选择框，获取方式是通过selectedIndex属性。
• 允许多选的选择框，循环检测选择项的selected属性

2、添加选项

• DOM方法

• Option构造函数创建新选项，接收text、value两个参数

• add()方法，参数是要添加的新选项和要添加到其前面的参考选项。

  • 如果添加到末尾，第二个参数应该是null

3、移除选项

• DOM方法 removeChild()
• 选择框remove()方法，传入索引
• 直接将选项设置为null

4、移动和重排选项

• appendChild()方法会从其父元素移除然后插入指定位置。
• insertBefore()插入到指定位置

4、表单序列化

• 字段名和值是 URL 编码的并以和号（&）分隔。

• 禁用字段不会发送。

• 复选框或单选按钮只在被选中时才发送。

• 类型为”reset”或”button”的按钮不会发送。

• 多选字段的每个选中项都有一个值。

• 通过点击提交按钮提交表单时，会发送该提交按钮；否则，不会发送提交按钮。类型为”image”的<input>元素视同提交按钮。

• <select>元素的值是被选中<option>元素的 value 属性。如果<option>元素没有 value 属性，则该值是它的文本。

5、富文本编辑

• 原理：在空白HTML文件中嵌入一个iframe。通过designMode属性设置为on，将这个空白文档变成可编辑的。

1、使用contenteditable

• 给任何元素设置contenteditable属性即可。
• 通过设置contentEditable切换编辑状态
  • 值：true / false / inherit

2、与富文本交互

• document.execCommand()
  • 三个参数
    • 要执行的命令
    • 表示浏览器是否为命令提供用户界面的布尔值 （始终false）
    • 执行命令必须的值

• queryCommandEnabled()用于确定当前选中文本或光标所在位置是否可以执行相关命令。
• queryCommandState()确定相关命令是否应用到了当前文本选区。
• queryCommandValue()返回执行命令时使用的值

3、富文本选择

• getSelection()方法可以获得富文本编辑器的选区

• 返回的对象有以下属性

  • anchorNode：选区开始的节点。

  • anchorOffset：在 anchorNode 中，从开头到选区开始跳过的字符数。

  • focusNode：选区结束的节点。

  • focusOffset：focusNode 中包含在选区内的字符数。

  • isCollapsed：布尔值，表示选区起点和终点是否在同一个地方。

  • rangeCount：选区中包含的 DOM 范围数量。

• 有以下方法

  • addRange(range)：把给定的 DOM 范围添加到选区。

  • collapse(node, offset)：将选区折叠到给定节点中给定的文本偏移处。

  • collapseToEnd()：将选区折叠到终点。

  • collapseToStart()：将选区折叠到起点。

  • containsNode(node)：确定给定节点是否包含在选区中。

  • deleteFromDocument()：从文档中删除选区文本。与执行 execCommand(“delete”, false, null)命令结果相同。

  • extend(node, offset)：通过将 focusNode 和 focusOffset 移动到指定值来扩展选区。

  • getRangeAt(index)：返回选区中指定索引处的 DOM 范围。

  • removeAllRanges()：从选区中移除所有 DOM 范围。这实际上会移除选区，因为选区中至少要包含一个范围。

  • removeRange(range)：从选区中移除指定的 DOM 范围。

  • selectAllChildren(node)：清除选区并选择给定节点的所有子节点。

  • toString()：返回选区中的文本内容。

4、通过表单提交富文本