当前位置: 首页 > Web前端 > HTML5

H5进阶

时间:2023-04-05 19:32:43 HTML5

HTML5Core新表单元素新表单验证API多媒体处理(视频、音频)Canvas新API(拖放、web存储)表单相关:新元素datalist、progress、meter、output新api方法:自定义验证message,实现表单验证setCustomValidity():h5自带提示框(必选),该方法可以修改提示的文字;如果没有报错,需要调用setCustomValidity(''),消息提示留空,否则无法提交表单;checkValidity():返回验证是否通过。res=ele.checkValidity();//res为布尔值,pass为trueNewevent:invalid事件,form执行遇到错误时会触发;formEle.addEventListener('invalid',fn,false);//在fn中通过事件获取第一个出现问题的表单元素;ValidityState对象:通过元素的validity属性获取,返回表单验证的各种状态;ele.validity;Canvas:绘图元素,配合js,首先使用getContext("2d")获取画布上下文(解释为画笔),通过上下文调用api绘图。方法api查看地址:http://www.w3school.com.cn/ht...拖拽API:两个关键点:source元素(被拖拽的元素),target元素(一个容器)。源元素事件:dragstart:拖动开始时触发drag:拖动过程中触发dragend:拖动结束时触发目标元素事件:dragenter:拖动过程中,鼠标第一次进入目标元素区域;dragover:当对象拖动到目标对象时,悬停在目标元素上drop:目标元素松开(放开)时触发dragleave:对象离开目标元素时触发注:执行上述方法时,default事件被preventDefault方法阻止。dataTransfer对象:保存拖拽过程中的各种组件数据,通过事件对象e获取。dataTransfer=e.dataTransfer//对象,常用的4个方法:-setData('type','data')://声明设置的数据和类型-getData('type')://获取数据的类型-clearData('type')://删除类型数据-setDragImage(img,x,y)://在拖放过程中,鼠标指针指向一个虚拟图像,该方法可以修改这个图像。