第十四章 表单脚本
表单的基础知识
基础知识
-
在
javascript中，表单对应的是HTMLForm-Element类型，HTMLFormElement继承自HTMLElement。在其他元素属性之外还包含独有属性和方法。-
acceptCharset:服务器能够处理的字符集；等价于HTML中的accept-charset特性。 -
action::接收请求的URL；等价于HTML中的action特性。 -
elements:表单中所有控制的集合(HTMLCollection)。 -
enctype:请求的编码类型；等价于HTML中的enctype特性。 -
length:表单中控件的数量。 -
method:要发送HTTP请求类型，等价于HTML中的method特性。 -
name:表单的名称；等价于HTML的name特性 -
reset():将所有表单域重置为默认值。 -
submit():提交表单。 -
target:用于发送请求和接收响应的窗口名称；等价于HTML的target特性。
-
-
document.forms:含有页面所有表单的数组。-
可以通过索引访问如果表单含有
name，也可以使用对象取值的形式通过name获取表单的数据。<body> <form name="test1"> <input type="text"> </form> <form name="test2"> <textarea name="" id="" cols="30" rows="10"></textarea> </form> </body> <script> let formDom = document.forms console.log(formDom['test1'] === formDom[0]) // true </script>取值方式
document.forms[index] ||document.forms[form-name]
-
提交表单
-
submit()方法- 将表单数据发送至服务器
-
<input type='submit'> || <button type='submit'>都可以提交表单，浏览器会在将请求发送之前触发submit，所以通过dom元素提交表单我们可以在submit事件中做预处理。 - 但通过
js中document.forms[0].submit()此时不会触发submit事件，所以我们需要在使用之前做预处理。
- 阻止默认事件
- 在
submit事件中通过event时间对象可以阻止默认行为event.preventDefault()
- 在
重置表单
-
reset()方法- 将该表单所有表单域重置为默认值。
- 与
submit类似将input || button元素的type = "reset"后使用。 - 不同点在于不论是
dom元素 || js操作reset()方法都会触发reset事件。
表单元素字段
访问表单中的元素,首先获取
dom,或可以从document.forms中选取某个表单，接着可以访问此表单中的elements属性，该属性中包含表单内的所有元素。-
共有的表单字段属性
除了
<fieldset>元素外disabled:布尔值，表示当前字段是否被禁用。form:指向当前字段所属表单的指针；只读。name:当前字段的名称。readOnly:布尔值，表示当前字段是否只读。tabIndex:表示当前字段的切换tab序号。type:当前字段类型，如checkbox/radiovalue:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。-
避免重复提交- 可以在一次提交后，给元素设置disabled属性。
- 需要注意的是
onclick在点击事件中如果阻止了默认事件，由于不同浏览器的触发时差问题，click有可能会在submit事件前触发。这样将不会在触发submit导致提交不成功。
-
共有的表单字段方法
foucs():获取焦点blur():失去焦点-
H5新增字段autofocus自动获取焦点<input type="text" autofocus>对于非表单元素，如果将其
tabIndex属性设置为-1,然后在调用focus()方法，也可以让这些元素获取焦点。
-
共有的表单字段事件
-
blur:失去焦点时触发。 -
change:对于<input> || <textarea>元素，在他们失去焦点并且value值改变时触发。<select>选项改变时触发。 -
focus:获取焦点时触发。
-
文本框脚本
基础知识
-
<input>-
size:字段控制输入框显示多少个字符 -
value:字段设置初始值 -
maxlength:字段设置最大字符数
-
-
<textarea>-
rows:字段指定文本框字符行数， -
cols:指定文本框的字符列数 -
初始值:写在文本框标签中
-
选择文本
上述两种文本框都支持
select()方法，用于选择文本框中的所有文本。-
选择
select事件- 用户选中文本，和调用
select()方法会触发select事件。
- 用户选中文本，和调用
-
取消选择文本
H5新增-
selectionStart & selectionEnd表示用户选择文本的起始和结束索引。
-
选择部分文本
-
H5新增-
setSelectionRange()方法接收两个参数，起始和结束索引。 - 在使用
setSelectionRange()方法的时候，需要获取焦点。
-
-
IE8以及更早版本-
createTextRange()方法创建一个范围，并将其放在恰当的位置上，在使用moveStart()和moveEnd()这两个范围方法将范围移动到位。在调用这两个方法之前，还必须使用collapse()方法将范围折叠到文本框的开始位置。此时moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本。
-
-
过滤输入
通过正则表达式匹配需要屏蔽的字符，然后使用
event.preventDefault(event)取消默认事件的形式可进行屏蔽。-
操作剪贴板
-
H5新增最早有IE支持 -
beforecopy || beforecut || beforepaste针对文本框的上下文菜单（预期将发生剪贴板事件）的情况下触发 -
copy || cut || paste在上下文菜单选择，或触发键盘组合按键时，所有浏览器都会触发他们。 -
beforecopy:复制操作前触发 -
copy:复制操作时触发 -
beforecut:剪切操作前触发 -
cut:剪切操作触发 -
beforepaste:粘贴操作前触发 -
paste:粘贴操作触发 -
clipboardData:IE中存放在window中其他存放在剪切事件对象event中-
getData():获取剪切板数据- 接收一个参数
MIME(text/plain) || URL
- 接收一个参数
-
setData():设置剪切板数据- 接收两个参数
MIME(text/plain) || URL- 要设置的数据字符串
- 返回值
true || false
- 接收两个参数
-
自动切换焦点
- 首先要知道用户已经输入完毕，然后拿到下一个表单元素调用
focus()
HTML5约束验证API
required:必填字段其他输入类型:
type=email & type=url-
数值范围:
number || range || datetime || datetime-local || date || month || week || time || min || max || setp-
input.setpUp():加法，接收一个参数 数值，修改当前值，不传默认+1 -
input.setpDown():减法，接收一个参数 数值，修改当前值，不传默认-1
-
-
输入模式
-
H5新增-
pattern:这个属性值为一个正则表达式，进行约束输入内容
-
-
-
检测有效
-
checkValidity():检查表单中某个元素是否有效 - 返回值
Boolean - 如果需要检测整个表单
doucment.forms[0].checkValidity()
- 属性：无效原因
-
customError:如果设置了setCustomValidity()则返回true -
patternMisMatch:输入值与pattern的正则表达式不匹配则返回true -
rangeOverflow:如果值比max大,则返回true -
rangeUnderflow:如果值比min小,则返回true -
stepMisMatch:如果min 和 max之间的步长值不合理，返回true -
toolong:长度超过maxlength返回true -
typeMismatch:不符合mail || url要求的格式，返回true -
valid:如果其他值都为false，则返回true -
valueMissing:标注为required的值为空，则返回true
-
-
-
禁止校验
-
novalidate:强制表单不校验<form mothod="post" action="text.php" novalidate></form>
formnovalidate:指定了属性的type = "submit"的元素，阻止触发校验
-
选择框脚本
基础知识
- 选择框时通过
<select>|| <option>元素创建的，HTMLSelectElement类型还提供了下列属性和方法 -
add(newOption, relOption):向控件插入新<option>元素，其位置在相关项relOption之前 -
multiple:布尔值，表示是否支持多项选择;等价于HTML中的multiple特性 -
options:控件中所有<option>元素的HTMLCollection -
remove(index):移除给定位置的选项 -
selectedIndex:基于0的选中项索引，没有选中项则为-1,对于支持多选的控件，只保存选中项中第一项的索引。 -
size:选择框中可见的行数。 -
value属性 规则如下- 如果没有选中项，则value为空字符串
- 如果有一个选中项，而且该项的
value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。 - 如果有一个选中项，但该项的
value特性在HTML中未指定，则选择框的value属性等于该项的文本。 - 如果有多个选中项，则选择框的
value属性将依据前两条规则取得第一个选中项的值。
-
<option>-
HTMLOptionElement对象-
index:当前选项在options集合中的索引 -
label:当前选项的标签；等价于HTML中的label特性 -
selected:布尔值，表示当前选项是否被选中。将这个属性设置为true,可以选中当前选项。 -
text:选项的文本 -
value:选项的值
-
-
change:事件- 选中选项时触发，不同于其他表单元素被修改且失去焦点后触发
-
选择选项
获取某一项的引用，然后将其
selected属性设置为trueselect['要修改的选择框dom'].options[索引].selected = true
添加选项
- 通过创建
<option>元素添加至<select>元素中let ops = document.createElement('option')selectDom.appendChild(ops)
- 通过
Option构造函数创建<option>元素let ops = new Option('Option text', 'Option value')selectDom.appendChild(ops)
- 通过
<select>的add()方法添加推荐let ops = new Option('Option text', 'Option value')-
selectDom.add(ops, undefined)- 第二个参数传入
undefined兼容所有浏览器，并添加至<select>中的末尾
- 第二个参数传入
移除选项
- 通过
dom0级移除selectDom.removeChild(selectDom.options[0])
- 通过
<select>的remove()方法移除selectDOm.remove(0)
- 通过将
option对象赋值为null- 在
dom出现之前的使用方式 selectDom.options[0] = null
- 在
移动和重排选项
- 最适合的方法
appendChild || insertBefore - 规则
- 当传入已存在的元素时，会先从父节点中移除该元素。在把他添加到指定的位置
- 移动和移除选项会重置每一个选项的
index属性
表单序列化
基础知识
- 浏览器向服务器发送表单数据流程
- 对表单字段的名称和值进行
URL编码，使用和号&分隔 - 不发送禁用的表单字段
- 只发送勾选的复选框和单选按钮
- 不发送
type为reset || button的按钮 - 多选选择框中的每个选中的值单独一个条目
- 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括
type为image的<input>元素 -
<select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。
- 对表单字段的名称和值进行
-
<fieldset>不需要参与序列化，而且它也没有type属性 -
DOM使用hasAttribute()方法检测vaule是否存在 -
IE使用specified属性检测value是否存在
富文本编辑
基础知识
- 这一技术的本质，就是在页面中嵌入一个包含空
HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>元素的HTML代码。designMode属性有两个可能的值off 默认值 || on。在设置为on时，整个文档都会变成可以编辑（显示插入符号）。- 在页面完全加载后才能设置
designMode属性。
- 在页面完全加载后才能设置
使用contenteditable属性`
-
可以在元素中直接设置
<div contenteditable></div> <!-- 可以将任何元素开启可编辑模式 -->
-
通过
dom操作设置let div = document.getElementById('editor')div.contenteditable = true
操作富文本
- 富文本主要的交互方式，是使用
document.execCommand()- 传递三个参数
- 要执行的命令名称
- 表示浏览器是否应该为当前命令提供用户界面的一个布尔值
- 为了兼容浏览器此参数应该始终传入
false
- 为了兼容浏览器此参数应该始终传入
- 执行命令必须的一个值，默认为
null
- 传递三个参数
富文本选区
- 此处介绍大量
API以及属性 详细请参照Page439 - 441
表单与富文本
此处介绍大量
API以及属性 详细请参照Page441 - 443-
基础知识
- 由于富文本不属于表单字段，所以在提交时应该单独获取数据
frams[富文本名称].document.body.innerHTML
