第十四章 表单脚本
2015-08-13 00:33:28 13 举报
AI智能生成
第十四章主要介绍了表单脚本的编写和使用。表单脚本是一种用于处理用户在网页表单中输入的数据的脚本语言。它可以帮助开发者验证用户输入的数据,确保数据的完整性和准确性。此外,表单脚本还可以用于处理用户的提交操作,例如将用户输入的数据发送到服务器,或者在用户提交表单后显示一个感谢页面。本章详细介绍了如何使用JavaScript编写表单脚本,包括如何获取和设置表单元素的属性,如何处理用户的操作事件,以及如何使用AJAX技术异步提交表单数据。通过学习本章,读者可以掌握表单脚本的基本知识和技能,提高网页开发的效率和质量。
作者其他创作
大纲/内容
表单的基础知识
JS中,表单对应的是HTMLFormElement类型
HTMLFormElement的属性/方法
acceptCharset
服务器能够处理的字符集
action
接受请求的URL
elements
表单中所有控件的集合
enctype
请求的编码类型
length
表单中控件的数量
method
要发送的HTTP类型,常用get/post
name
表单的名称
reset()
将所有表单重置为默认值
submit()
提交表单
target
用于发送请求和接收响应的窗口名称
获取form的方式
为其添加id,通过getElementById()获取
通过document.forms可获取页面中所有表单,通过索引或name取得特定表单
提交表单
页面中button/input设置属性:type="submit"
js中设置:form.submit()
解决重复提交表单的方法
在第一次提交表单后就禁用提交表单
利用onsubmit事件处理程序取消后续的表单提交操作
重置表单
页面中button/input设置属性:type="reset"
js中设置:form.reset()
表单字段
elements属性
是表单中所有表单元素的集合,可按照位置和name访问表单中的字段
共有的表单字段属性
disabled
表示当前字段是否被禁用,布尔值
form
指向当前字段所属表单的指针,只读
name
当前字段的名称
readOnly
表示当前字段是否只读,布尔值
tabIndex
表示当前字段的切换序号
type
当前字段类型
value
当前字段将被提交给服务器的值
共有的表单字段方法
focus()
获取焦点
blur()
失去焦点
HTML5新增autofocus属性,可自动获取焦点
共有的表单字段事件
blur
当前字段失去焦点时触发
change
在input、textarea元素失去焦点且value值改变时触发
在select元素的选项改变时触发
focus
当前字段获取焦点时触发
文本框脚本
表示文本框的方式
元素的单行文本框
input文本框属性
type
设置为"text"
size
可指定文本框中显示的字符数
value
可设置文本框的初始值
maxlength
可指定文本框中输入最大字符数
textarea的属性
rows
指定文本框字符行数
cols
指定文本框字符列数
初始值放在中间,且不能指定最大字符数
选择文本
select()方法
可在文本框获取焦点时,选择文本框中的所有文本
获取选择的文本
HTML5的selectionStart和selectEnd属性,表示选取文本的范围
IE8及之前版本:document.selection对象,可保存在整个文档范围内选择的文本
选择部分文本
HTML5的setSelectionRange(n,m):从索引n开始,截取到索引m处,但不包含m
IE8及之前版本:createTextRange()
过滤输入
屏蔽字符/按键
操作剪贴板
自动切换焦点到下一个字段
HTML约束验证API
required
必填字段
email
输入文本需符合电子邮件格式
url
输入文本需符合URL的模式
tel
输入文本必须是数字
number/range/datetime/datetime-local/date/month/week/time
都是基于数字的值,浏览器支持不好
都有min,max,step(步长)属性
pattern
属性值是一个正则表达式,用于匹配文本框中的值
注:模式的开头和结尾不用加^和$符合
checkValidity()
用于检测表单中的方法是否有效,返回true或false
validity
通过该对象的属性可以告诉开发人员字段为什么有效或无效
禁用验证
novalidate:可告诉表单不进行验证
formnovalidate:可指定点击某个提交按钮不进行表单验证
选择框脚本
选择框是通过
属性/方法
add(newOption,relOption)
向控件中插入新的option元素
multiple
布尔值,是否允许多项选择
options
控件中所有option元素的集合
remove(index)
移除给定位置的选项
selectedIndex
基于0的选中项的索引,若没有选中项,则值为-1
size
选择框中所见的行数
HTMLOptionElement对象
每个option元素都有一个HTMLOptionElement对象
添加的属性
index
当前选项在options集合中的索引
label
当前选项的标签
selected
布尔值,表示当前选项是否被选中
text
选项的文本
value
选项的值
表单序列化
富文本编辑
designMode属性
属性值设置为"on"时,整个文档会变得可编辑;off(默认值),不可编辑
在页面中嵌入一个包含空HTML页面的iframe,设置designMode属性使空白的HTML页面可以被编辑
contenteditable属性
只需将该属性应用给页面中的某个元素,就可以编辑该元素,不需要iframe
该属性值为"true":打开;"false":关闭;"inherit":从父元素继承
操作富文本
document.execCommand()
该方法可对文档只需预定义的命令,且可以应用大多数格式
queryCommandEnabled()
可用于检测是否可以针对当前选择的文本或插入字符的位置执行某个命令
queryCommandState()
用于确定是否已将制定命令应用到了选择的文本
queryCommandValue()
用于取得执行命令时传入的值
富文本选区
在富文本编辑器中,使用iframe的getSelection()可以确定实际选择的文本
表单与富文本
富文本编辑器中的html不会被自动提交给服务器,通常是添加一个隐藏的表单字段,让其值等于从iframe中提取的html
0 条评论
下一页