十四章表单脚本

2020-11-29 本文已影响0人昊哇恰

第十四章表单脚本

表单的基础知识

基础知识

在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/radio
- value:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
- 避免重复提交
  - 可以在一次提交后，给元素设置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属性设置为true

select['要修改的选择框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

十四章表单脚本

第十四章表单脚本

表单的基础知识

基础知识

提交表单

重置表单

表单元素字段

文本框脚本

基础知识

选择文本

过滤输入

自动切换焦点

`HTML5`约束验证`API`

选择框脚本

基础知识

选择选项

添加选项

移除选项

移动和重排选项

表单序列化

基础知识

富文本编辑

基础知识

使用`contenteditable`属性`

操作富文本

富文本选区

表单与富文本

猜你喜欢

热点阅读

十四章 表单脚本

第十四章 表单脚本

表单的基础知识

基础知识

提交表单

重置表单

表单元素字段

文本框脚本

基础知识

选择文本

过滤输入

自动切换焦点

HTML5约束验证API

选择框脚本

基础知识

选择选项

添加选项

移除选项

移动和重排选项

表单序列化

基础知识

富文本编辑

基础知识

使用contenteditable属性`

操作富文本

富文本选区

表单与富文本

猜你喜欢

热点阅读

十四章表单脚本

第十四章表单脚本

`HTML5`约束验证`API`

使用`contenteditable`属性`