JavaScript高级程序设计-第三版（表单脚本）

十四、表单脚本

14.1 表单基本知识

• HTMLFormElement类型
  • acceptCharset 服务器能够处理的字符集，即accept-charset
  • action 请求的URL
  • elements 表单中的所有元素的集合（HTMLCollection）
  • enctype 编码类型
  • length 控件的数量
  • method
  • name
  • reset() 将表单域重置为默认值
  • submit()
  • target 接收响应的窗口名称
• 获取表单对象的方式
  • 通过getElementById()等方式
  • document.forms获取页面中所有的表单集合
  • name特性的表单作为属性保存在document的对象中，例如document.formName1

14.1.1 提交表单

• 当表单中存在类型为submit的<input>元素或者<button>元素时，在任意获得焦点的表单控件（例如，input [ type = text ]）上按回车会触发表单提交，textarea元素除外
• 点击submit类型的元素会触发submit事件
• 在form对象上调用submit() 方法不会触发submit事件
• 避免表单重复提交
  • 提交后禁用按钮
  • 在事件中取消后续操作

14.1.2 重置表单

• 类型为reset的<input>元素或者<button>元素
• 在form对象上调用reset() 方法会触发reset事件

14.1.3 表单字段

• 表单对象的elements属性
  • 表单中所有元素的集合
  • 可以通过index和name特性访问集合获取元素

14.1.3.1 共有的表单字段属性

• disabled
• form 当前字段所属表单的指针，只读
• name
• readOnly
• tabIndex
• type
• value

14.1.3.2 共有的表单字段方法

• focus()
  • 将焦点设置到表单字段
  • HTML5的autofocus可以实现相同功能
    • <input type=‘text’ autofocus />
• blur()

14.1.3.3 共有的表单字段事件

• blur
• change
  • 对于<input>和<textarea>元素，失去焦点且value改变时触发
  • <select>选项改变时触发
• focus

14.2 文本框脚本

• <input type=‘text’ />
  • size 最大显示字符数
  • maxLength 最大输入字符数
  • value 文本框初始值
• <textarea></textarea>
  • rows 最大显示字符行数
  • cols 最大显示字符列数
  • 不能设置最大输入字符数
  • 文本框初始值用标签包裹

14.2.1 选择文本

• 文本框对象的select()
  • 选中文本框的内容
  • 常用于方便用户替换文本框默认值

14.2.1.1 选择(select)事件

• 调用select()方法时会触发
• 用户选择文本时触发

14.2.1.2 取得选择的文本

• HTML5
  • 文本框对象属性
    • selectStart 选区开头的偏移量
    • selectEnd
• IE8
  • document.selection
    • 整个文档范围内选择的文本
    • 无法确定哪个部位
    • document.selection.createRange().text

14.2.1.3 选择部分文本

• 文本框对象的setSelectionRange(startIndex, endIndex)
  • 接收参数
    • 起始位置索引
    • 结束位置索引，不包括本身
• IE8

1. 需要在文本框对象上创建范围，即 textbox.createTextRange()
2. collapse() 选区收缩
3. moveStart()和moveEnd() 设置起始位置
4. select()

14.2.2 过滤输入

14.2.2.1 屏蔽字符

• 在keypress 事件处理程序中识别需要屏蔽的字符
• 调用preventDefault()

14.2.2.2 操作剪贴板

• 剪贴板事件
  • beforecopy
  • copy
  • beforecut
  • cut
  • beforepaste
  • paste
• 触发时机
  • copy、cut、paste
    • 文本框上下文菜单选择
    • 键盘组合键
  • beforecopy、beforecut、beforepaste
    • IE会在相应的copy等之前触发
    • 除IE外会在现实上下文菜单时触发
• 访问剪贴板中的数据
  • clipboardData
    • IE中作为window的属性，可以随时访问
    • 其他浏览器中则作为event对象的属性，只能在事件处理程序中访问
    • 对象方法
      • getData()
        • 接收参数
          • 取得的数据格式
      • setData()
        • 接收参数
          • 数据格式
          • 文本
        • 返回值
          • 是否成功
      • clearData()

14.2.3 自动切换焦点

• 用户填写完当前字段时，焦点自动切换到下一个字段
• 如何判断填写完当前字段？
  • 设置最大输入字符数maxLength
• 切换到下一个字段
  • 查找下一个字段后调用focus()方法

14.2.4 HTML5约束验证API

• 浏览器根据标记中的规则自动执行验证，不需要javascript

14.2.4.1 必填字段

• required
  • <input id=‘test’ type=‘text’ required/>
  • 相应的可以通过DOM对象的 required 属性检查表达字段是否为必填，返回bool
  • 必填项不填写直接提交
    • 在字段下方弹出帮助框

14.2.4.2 其他输入类型

• input type
  • email
  • url

14.2.4.3 数值范围

• input type
  • number
  • range
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
• HTML特性
  • max
  • min
  • step
• javascript方法
  • stepUp() 在当前对象的值的基础上加上指定的数值
  • stepDown()

14.2.4.4 输入模式

• HTML5特性
  • pattern
    • 值为正则表达式
    • 默认其模式开头结尾带有^和$

14.2.4.5 检测有效性

• checkValidity()
  • 表单字段具有该方法
  • 表单自身也具有该方法，所有字段都有效时返回true
• validity方法
  • 返回一个对象，表示字段有效或无效的原因
  • 对象包含一系列属性，每个属性返回bool
    • customError
      • 设置了setCustomValidity()，则返回true
    • patternMismatch
    • rangeOverflow 是否超出最大值，不匹配返回true
    • rangeUnderflow 是否小于最小值
    • stepMisMatch
    • tooLong 是否超过maxLength
    • typeMismatch
    • valid
      • 其他属性都是false，即都匹配，则返回true
    • valueMissing
      • required

14.2.4.6 禁用验证

• HTML5特性
  • novalidate
    • 标识元素不进行验证
  • formnovalidate
    • 标识提交按钮不需要触发验证机制直接提交

14.3 选择框脚本

• HTMLSelectElement类型
  • add(newOption, relOption)
    • 在相关项之前插入指定项
  • multiple 返回bool，相当于HTML的multiple特性
  • options 所有选项的集合
  • remove(index)
  • selectedIndex
    • 多选时只返回第一个被选项
    • 没有选中项则返回 -1
  • size 选择框中可见的行数
• value
  • 选中项中未设定value值，则value等于文本
  • 多选时value等于第一个选中项的value
• HTMLOptionElement类型
  • index 在options集合中的索引
  • label
  • selected 返回bool值
  • text
  • value

14.3.1 选择选项

• 单选
  • 访问选中项
    • selectedIndex
  • 设置选中项
    • selectedIndex
      • 在多选的情况下会将之前已选中的项取消
    • selected
      • 不会取消其他选中项
• 多选
  • 访问选中项
    • 循环判断option元素的selected属性

14.3.2 添加选项

• DOM
  • appendChild(node)
• add()

14.3.3 移除选项

• DOM
  • removeChild(node)
• remove(index)
• 将options集合中的某一项置为null
• 移除全部选项需要循环

14.3.4 移动和重排选项

• 移动
  • 从一个选择框移动到另一个选择框中
  • appendChild()
• 重排
  • 调整顺序
  • insertBefore()

14.4 表单序列化

• 表单提交过程
  • 表单字段进行URL编码
  • 多个表单字段之间用&分割
  • 设置了name特性的元素才会被提交
  • 多选选择框、复选框
    • 选中的项才会提交
    • 每个选中的值单独一个条目（键值对）
• 表单序列化方式
  • 循环表单元素
  • 按类型对表单字段进行拼接处理

14.5 富文本编辑

• 生成可编辑区
  • 方式一
    • 借助iframe，并设置其designMode为on
      • 在页面中嵌入一个包含空HTML页面的iframe
      • 设置designMode
      • 最终效果
        • 生成类似文本框的可编辑区

14.5.1 使用contenteditable属性

• 生成可编辑区
  • 方式二
    • 任何元素添加contenteditable属性
      • 最终效果
        • 生成类似文本框的可编辑区
    • 或者通过DOM的方式指定contenteditable属性值
      • “true”
      • “false”
      • “inherit”+

14.5.2 操作富文本

• document.execCommand()
  • 对选中的文本执行预定义命令
  • 接收参数
    • 命令名称
    • 是否为当前命令提供用户界面
      • 默认设置为false
    • 执行命令需要的值
      • 不需要则传递null
  • 命令形成的HTML在不同浏览器中不一定一致

命令	值（方法的第三个参数）	说明
backcolor	颜色字符串	设置文档背景色
bold	null	将选择的文本转换为粗体
copy	null	将选择的文本复制到剪贴板
createlink	URL字符串	将选择的文本转换为链接
cut	null	将选择的文本剪切到剪贴板
delete	null	删除选择的文本
…	…	…

• queryCommandEnabled(command)
  • 判断命令是否可以执行
• queryCommandState(command)
  • 判断指定的命令是否应用到了选择的文本
    • 返回bool值
  • 常用来控制加粗、斜体按钮的状态
• queryCommandValue(command)
  • 取得执行命令时传入的值，即方法的第三个参数

<html>
	<head>
		<script>
		window.onload=function(){
				window.frames[0].document.designMode='on';
				var button = document.getElementById('bold');
				button.onclick=function(){
					frames["richedit"].document.execCommand('bold',false,null);
					document.execCommand('bold',false,null);
				}
			};
		</script>
	</head>
	<body>
		<iframe name='richedit' src='blank.html'></iframe><br/>
		<button id='bold'>加粗</button><br/>
		<div id='edit' style='background-color:red;' contenteditable></div>
	</body>
</html>

14.5.3 富文本选区

• window或者document对象的**getSelection()**方法
  • 返回表示当前选择文本的Selection对象
    • anchorNode 选区起点所在的节点
    • anchorOffset 在到达选区起点之前跳过的anchorNode中的字符数量
    • focusNode 选区终点所在的节点
    • focusOffset focusNode中包含在选区之内的字符数量
    • isCollapsed
    • rangeCount 选区中包含的DOM范围的数量
    • addRange(range)
    • collapse(node, offset)
    • collapseToEnd()
    • collapseToStart()
    • containsNode(node)
    • deleteFromDocument() 从文档中删除选区中的文本
    • extend(node, offset)
    • …

14.5.4 表单与富文本

• 富文本编辑器中不属于表单
• 需要提交时先将富文本编辑器中的HTML提取出来，再复制给隐藏的表单字段以实现提交富文本的效果