十四、表单脚本
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
- document.selection
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外会在现实上下文菜单时触发
- copy、cut、paste
- 访问剪贴板中的数据
- clipboardData
- IE中作为window的属性,可以随时访问
- 其他浏览器中则作为event对象的属性,只能在事件处理程序中访问
- 对象方法
- getData()
- 接收参数
- 取得的数据格式
- 接收参数
- setData()
- 接收参数
- 数据格式
- 文本
- 返回值
- 是否成功
- 接收参数
- clearData()
- getData()
- clipboardData
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
- 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
- 值为正则表达式
- 默认其模式开头结尾带有^和$
- 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
- customError
14.2.4.6 禁用验证
- HTML5特性
- novalidate
- 标识元素不进行验证
- formnovalidate
- 标识提交按钮不需要触发验证机制直接提交
- novalidate
14.3 选择框脚本
- HTMLSelectElement类型
- add(newOption, relOption)
- 在相关项之前插入指定项
- multiple 返回bool,相当于HTML的multiple特性
- options 所有选项的集合
- remove(index)
- selectedIndex
- 多选时只返回第一个被选项
- 没有选中项则返回 -1
- size 选择框中可见的行数
- add(newOption, relOption)
- value
- 选中项中未设定value值,则value等于文本
- 多选时value等于第一个选中项的value
- HTMLOptionElement类型
- index 在options集合中的索引
- label
- selected 返回bool值
- text
- value
14.3.1 选择选项
- 单选
- 访问选中项
- selectedIndex
- 设置选中项
- selectedIndex
- 在多选的情况下会将之前已选中的项取消
- selected
- 不会取消其他选中项
- selectedIndex
- 访问选中项
- 多选
- 访问选中项
- 循环判断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
- 最终效果
- 生成类似文本框的可编辑区
- 借助iframe,并设置其designMode为on
- 方式一
14.5.1 使用contenteditable属性
- 生成可编辑区
- 方式二
- 任何元素添加contenteditable属性
- 最终效果
- 生成类似文本框的可编辑区
- 最终效果
- 或者通过DOM的方式指定contenteditable属性值
- “true”
- “false”
- “inherit”+
- 任何元素添加contenteditable属性
- 方式二
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)
- …
- 返回表示当前选择文本的Selection对象
14.5.4 表单与富文本
- 富文本编辑器中不属于表单
- 需要提交时先将富文本编辑器中的HTML提取出来,再复制给隐藏的表单字段以实现提交富文本的效果