JavaScript 笔记(14)- 表单脚本

原创 乘风逐月 随笔 JavaScript 211阅读 2018-06-04 17:29:24 举报

一、表单的基础知识

1.获取 form 元素

在 HTML 中,表单是由 form 元素来表示的。
(1)document.getElementById('formid')
(2)document.forms[index]

2.form 特有属性和方法

(1)acceptCharset: 服务器能够处理的字符集,等价于 HTML 中的 accept-charset 特性。
(2)action: 接受请求的 URL,等价 HTML 的 action 特性。
(3)elements: 表单中所有控件的集合。
(4)enctype: 请求的编码类型,等价 HTML 的 enctype 特性。
(5)length: 表单中控件的数量。
(6)method: 要发送的 http 请求类型,通常是 'get' 或 'post',等价 HTML 的method 特性。
(7)name: 表单的名称,等价 HTML 的name 特性。
(8 reset(): 将所有表单域重置为默认值。
(9)submit(): 提交表单。
(10)target: 用于发送请求和接受响应的窗口名称,等价于 HTML 的 target 特性。

3.提交表单

(1)表单中有 type='submit' 的 input 和 button 就可以定义提交按钮,点击提交按钮或者在表单控件有焦点时按回车键就会提交表单。以这种方式提交表单,浏览器会在将请求发送给服务器之前触发 submit 事件,这样就可以验证表单或者取消表单提交(preventDefault())。
(2)form.submit()方法提交,这种方法提交不会触发submit 事件,所有要再提交之前验证表单数据。

4.重置表单

(1)使用 type='reset' 的 input 或 button 可以创建重置按钮,单击重置按钮时,会触发 reset 事件,故可以取消重置操作。
(2)document.getElementById('formid').reset()方法重置,这个方法会触发 reset 事件

二、表单字段

1.获取表单元素

(1)原生 DOM 方法访问
(2)通过 form.elements 这个集合访问,这是一个有序列表可以使用索引或name来获取。如果有多个相同name的元素,获取一个集合。

2.共有的表单字段属性

(1)disabled: 布尔值,表示当前字段是否被禁用
(2)form: 指向当前字段所属表单的指针,只读
(3)name: 字段名称
(4)readonly: 布尔值,表示当前字段是否只读
(5)tabIndex: 表示当前字段切换的(tab)序号
(6)type: 当前字段类型
(7)value: 当前字段的值。对于文件字段,该属性只读,包含文件在计算机中的路径。

3.共有的表单字段方法

(1)focus():让元素获取焦点
(2)blur():让元素失去焦点

4. 共有的表单字段事件

(1)blur: 失去焦点时触发
(2)change: 对于input 和 textarea 元素,失去焦点且 value值改变时触发;对于select元素,在其选项改变时触发。
(3)focus: 字段获取焦点时触发

三、文本框脚本

1.input 和 textarea 的区别

(1)input特性
a. size: 指定文本框中能够显示的字符数
b. maxlength: 指定文本框可以接受的最大字符数
c. value: 可以设置文本框的初始值
(2)textarea特性
a. rows: 指定文本框的字符行数
b. cols: 指定文本框的字符列数
c. textarea 的初始值必须放在双标签中间

2.选择文本

(1)select()方法
input 和 textarea 都支持 select()方法,用于选择文本框中的所有文本(可用于在获取焦点时获取所有默认文本,用户则不需要一个个的删除)
(2)select选择事件
在选择了文本框中的文本时,或调用了 select() 方法时,都会触发 select 事件
(3)获取选中的文本
使用input或textarea元素的 selectionStart 和 selectionEnd 属性,这两个属性中保存的是基于0的数值,表示所选择的文本的范围。

(4)选择部分文本
所有文本框都有一个 setSelectionRange() 方法,该方法接受两个参数:要选中的第一个字索引和要选中的最后一个字符索引。要看到选中的文本,必须在调用 setSelectionRange() 方法之前或之后立即让文本框获取焦点。

四、操作剪贴板

剪贴板事件
(1)beforecopy: 在发生复制操作前触发
(2)copy: 发生复制操作时触发
(3)beforecut: 在发生剪贴操作前触发
(4)cut: 发生剪贴操作时触发
(5)beforepaste: 在发生粘贴操作前触发
(6)paste: 发生粘贴操作时触发

五、H5约束验证

1.验证属性

H5为表单元素增加了一些特定属性用以验证元素值是否符合要求。
(1)required: required 属性,在提交表单时,浏览器自动验证给出提示,样式由浏览器决定。
(2)pattern: pattern属性的值是一个正则表达式,用于匹配文本框中的值。
(3)min/max:最小值或最大值
(4)step: 刻度差
(5)maxlength: 最大字符长度

2.检测有效性

(1)checkValidity(): 使用 checkValidity() 方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法,如果字段值有效,这个方法返回 true,否则返回 false。检测整个表单是否有效,可以在表单自身调用 checkValidity() 方法,如果所有字段都有效返回true,否则返回false。
(2)validity属性: 表单字段的该属性是一个对象,包含一系列属性表示字段无效的原因,每个属性会返回一个布尔值。
a. valueMissing: 如果有required属性的元素没有值,返回true
b. patternMismatch: 如果知道的值与指定的 pattern 属性不匹配,返回true
c. rangeUnderflow/rangeOverflow: 如果值比最小值小或比最大值大,返回true
d. stepMisMatch: 如果min和max之间的步长不合理,返回true
e. toolong: 如果值的字符长度超过了maxlength指定的长度,返回true

3.禁用验证

(1)novalidate: 给 form 设置该属性,表单将不再进行验证。
(2)formnovalidate: 给提交按钮设置该属性,表单也将不再进行验证。

六、选择框脚本

1.select 元素的特有属性方法

(1)add(newOption,reloption): 该方法向select中插入新 option,位置在 reloption 之前。
(2)options: select中所有 option 元素的集合
(3)multiple: 布尔值,表示是否允许多选,等价 HTML 中的 multiple 特性
(4)remove(index): 移除指定位置的选项
(5)selectdIndex: 基于0的选中项的索引,没有选中项则值为-1
(6)size: 选择框中可见的行数,等价于 HTML 中的 size 特性
(7)value: 若是多选,有多个选中项,value 取第一个选中项的值

2.option 元素的特有属性方法

(1)index: 当前选项在 options 集合中的索引
(2)selected: 布尔值,当前选项是否被选中
(3)text: 选项的文本
(4)value: 选项值,等价 HTML 中的 value 特性
(5)移除某一项:selectbox.options[0] = null
注: 大部分属性的目的是为了方便对选项的数据的访问,效率高。

七、富文本编辑

1. 使用 iframe

在页面中嵌入一个包含空页面的 iframe,在页面加载完成之后,设置 iframe 的 designMode 属性。该属性有两个值:'off'(默认值)和'on',设置为'on'时,整个文档都会变得可编辑,可以通过键盘将文本内容加粗、变成斜体等。可以通过css为iframe页面内容设置样式。

2. 使用 contenteditable 属性

可以为页面中的任意元素添加 contenteditable 属性,然后就可以编辑该元素。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复