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

最新推荐文章于 2025-03-13 13:12:01 发布

原创最新推荐文章于 2025-03-13 13:12:01 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了JavaScript中的表单脚本，包括表单基本知识、文本框脚本、选择框脚本、表单序列化及富文本编辑。详细介绍了表单提交、重置、字段属性与事件，以及文本框的选择、过滤输入、自动切换焦点等功能。

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

需要在文本框对象上创建范围，即 textbox.createTextRange()
collapse() 选区收缩
moveStart()和moveEnd() 设置起始位置
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)
  - …