摘要:获取表单元素获取表单的方式目前来说有很多种实现方式,先给大家回顾一下不同方法的获取表单方式代码代码对象提供了属性该属性用于获取当前页面中所有表单的集合,返回对象,该对象封装了当前页面中的所有表单对象代码代码直接获取页面上所有的集合获取表单中
获取表单元素
获取表单的方式目前来说有很多种实现方式,先给大家回顾一下不同方法的获取表单方式
//html代码//JavaScript代码 Document对象提供了forms属性
该属性用于获取当前HTML页面中所有表单的集合,返回HTMLCollection对象,该对象封装了当前HTML页面中的所有表单对象
//HTML代码//JavaScript代码 获取表单中组件元素
HTMLFormElement对象的elements属性
该属性用于获取指定表单的所有组件的集合
//html代码//JavaScript代码 文本框的操作
元素对应DOM中的对象是HTMLInputElement对象,而
文本内容的选择
HTMLInputElement对象和HTMLTextAreaElement对象都提供了select()方法,该方法用于选择当前文本框的所有文本内容
//HTML代码//JavaScript代码
select事件
select()方法对应着select事件,也就是说:当调用select()方法时,会触发select事件
//html代码
selectionStart:表示用户选中文本内容的开始索引值
selectionEnd:表示用户选中文本内容的结束索引值的下一个值
//html代码//JavaScript代码
设置文本内容
setSelectionRange()方法
作用:设置选择的文本内容
注意:
焦点在文本内容的最后面:select()方法(全选)
焦点在设置文本内容的范围内有效
//html代码//JavaScript代码
操作剪切版
剪切板功能是经常被忽略,却很重要的功能,可以增强用户体验,方便用户交互,以下三个事件时剪切板的主要操作
1.copy:在发生复制操作时触发
2.cut:在发生剪切操作时触发
3.paste:在发生粘贴操作时触发
事件对象的clipboardData属性存储了由用户触发剪切板事件时所影响的带有MIME类型的数据。注意:IE 8及之前版本的浏览器,clipboarData属性需要通过window对象获取
var clipboardData=event.clipboardData||window.clipboardData;
该属性得到的是一个DataTransfer对象,该对象提供了操作数据的常用方法
1.setData()方法:设置数据内容
2.getData()方法:获取数据内容
3.clearData()方法:删除与给定类型关联的数据
//html代码//JavaScript代码 下拉列表操作
下拉列表是由
该对象提供的属性
length:表示当前
该对象提供的方法如下表所示
add(item,[before]):将
item(idx):放回索引值为idx的
remove(index):从当前
HTMLOptionElement对象是
该对象提供的属性
index:当前
selected:表示当前
text:当前
value:当前
HTML5提供了一组用于表单验证的API,目前主流浏览器对HTML5提供的验证API支持越来越好
验证API的属性
validity: 一个validityState对象,描述元素的验证状态
validity.customError:如果元素设置了自定义错误,返回true,否则返回false
validity.patternMismatch:如果元素的值不匹配所设置的正则表达式,返回true,否则返回false
validity.rangeOverflow:如果元素的值高于所设置的最大值,返回true,否则返回false
validity.rangeUnderflow:如果元素的值低于所设置的最小值,返回true,否则返回false
validity.stepMismatch:如果元素的值不符合step属性的规则,返回true,否则返回false
validity.tooLong:如果元素的值超过所设置的最大长度,返回true,否则返回false
validity.typeMismatch:如果元素的值出现语法错误,返回true,否则返回false
validity.valueMissing:如果元素设置了required属性且值为空,返回true,否则返回false
validity.valid:如果元素的值不存在验证问题,返回true,否则返回false
验证API的方法
checkValidity():如果元素的值不存在验证问题,返回true,否则返回false
setCustomValidity(message):为元素添加一个自定义的错误消息,如果设置了自定义错误消息,则该元素被认为是无效的,并显示指定的错误
提交表单时,会触发submit事件
表单还提供了submit()方法用于提交表单,使用该方法时允许表单内使用任一普通按钮即可(并非提交按钮)
注意:使用submit()方法提交表单不会触发submit事件
//html代码//JavaScript代码
submit()方法
//html代码//JavaScript代码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97381.html
摘要:在前端页面中,把用纯对象表示,负责显示,两者做到了最大限度的分离。的显示与否和的布尔值有关,还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制,初始值和的结果都是。组件的声明在组件上,则完全没有进入生命周期。 开始前说一说 吐槽 首先, 文章有谬误的地方, 请评论, 我会进行验证修改。谢谢。 vue真是个好东西,但vue的中文文档还有很大的改进空间,有点大杂烩的意思,对于怎么...
表单脚本 表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset,服务器能够处理的字符集,等价于HTML中的accept-charset特性 action,接受请求的URL,等价于HTML中的action特性 elements,表单中所有控件的集合 enctype,请求的编码类型,等价于HTML中的enctype特性 length,表单中控件的数量 m...
摘要:布尔值,表示当前字段是否被禁用。指向当前字段所属表单的指针只读。文本框脚本在中,有两种方式来表现文本框一种是使用元素的单行文本框,另一种是使用的多行文本框。然后,我们把这个函数指定为每个文本框的事件处理程序。 本章知识架构 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...
摘要:用操作表单和操作是类似的,因为表单本身也是树。因此,第二种方式是响应本身的事件,在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交,如果,浏览器将不会继续提交,这种情况通常对应用户输入有误,提示用户错误信息后终止提交。 用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种: 文本框,对应的,用于输入文本; ...
阅读 1961·2021-11-22 14:45
阅读 2541·2021-10-12 10:11
阅读 728·2021-09-22 10:02
阅读 1056·2019-08-30 15:55
阅读 1118·2019-08-30 15:54
阅读 3212·2019-08-30 15:54
阅读 1128·2019-08-29 17:16
阅读 3054·2019-08-28 17:55