一些html5表单知识及EventUtil对象完善
来源:互联网 发布:孙笑川 知乎 编辑:程序博客网 时间:2024/06/14 06:36
前言
这部分主要讲讲表单知识!
表单知识
1、Html5的autofocus属性。
有个这个属性,我们不用js就能自动把焦点移动到相应的字段。
例如:
<input type="text" value="" autofocus />
2、获取选择的文本
今天我主要说一下如何获取文本框中选择的数值。html5中增加了两个属性:selectionStart,selectionEnd,可以获取开始的选择和结束的选择。
因此我们可以封装一个函数:
function getSelectedText(textbox){ if(typeof textbox.selectionStart =="number"){ return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); }else if(document.selection){ return document.selection.createRange().text; }}
通过上面函数,来获取选择的文本,这个应用也是蛮多的。
3、选择部分文本
为了兼容性,我们也封装了一个函数。用到了setSelectionRange();函数如下:
//选择部分文本function selectText(textbox,startIndex,stopIndex){ if(textbox.setSelectionRange){ textbox.setSelectionRange(startIndex,stopIndex); }else if(textbox.createTextRange){ var range=textbox.createTextRange(); range.collapse(true); range.moveStart("character",startIndex); range.moveEnd("character",stopIndex-startIndex); range.select(); } textbox.focus();}
用法如下:
textbox.value="hello haorooms";//选择所有文本selectText(textbox,0,textbox.value.length); //hello haorooms//选择前3个字符selectText(textbox,0,3);//hel//选择4-7个字符selectText(textbox,4,7);//o h
4、html5剪切板事件
html5把剪切板事件纳入规范,6个剪切板事件!
beforecopy :发生在复制操作之前copy:发生在复制操作时触发beforecut:在剪切操作之前触发cut:在发生剪切的时候触发beforepaste:在发生粘贴操作之前触发paste:在发生粘贴操作时触发
因此,我们再给EventUtil封装2个函数:
var EventUtil = { //紧接着之前的代码,之前的代码省略....... getClipboardText:function(event){//获取剪切板内容 var clipboardData =(event.clipboardData|| window.clipboardData); return clipboardData.getData("text"); }, setClipboardText:function(event,value){//设置剪切板内容 if(event.clipboardData){ return event.clipboardData.setData("text/plan",value); }else if(window.clipboardData){ return window.clipboardData.setData("text",value); } }};
5、自动切换焦点
我们在表单输入的时候,经常会现在输入长度,用maxLength,我们现在的想法就是,当输入长度到达最大时,让其自动切换焦点,增加用户体验,可以避免我们再用tab键或者鼠标了,那么在这里,我们封装一个函数吧~
(function(){ function tabForward(event){ event=EventUtil.getEvent(event); var target =EventUtil.getTarget(event); if(target.value.length==target.maxLength){ var form =target.form; for (var i=0,len=form.elements.length;i<len;i++){ if(form.elements[i]==target){ if(form.elements[i+1]){ form.elements[i+1].focus() } return; } } } }vartextbox1=document.getElementById("textTel1"),textbox2=document.getElementById("textTel2"),textbox3=document.getElementById("textTel3");EventUtil.addHandler(textbox1,"keyup",tabForward);EventUtil.addHandler(textbox2,"keyup",tabForward);EventUtil.addHandler(textbox3,"keyup",tabForward);})();
完整案例下载,请等待“前端资料库上线”,该案例在前端资料库中!
6、html5约束验证API
假如我们要必填字段,可以如下写:
<input type="text" name="username" required > <!--必填字段 -->
html5增加了pattern属性,可以做正则验证,例如只输入数字
<input type="text" pattern="\d+" name="count" >
type是number的属性,我之前写过一篇文章,大家可以看一下:http://blog.csdn.net/qq_39198420/article/details/77878038
7、检测有效性
主要是用checkValidity()方法和validity属性。checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法,如果字段的值是有效的,这份方法会返回true,否则则是false。与checkValidity()方法相比,validity属性可以告诉你很多东西。
validity对象属性包含如下一系列属性:
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError: 不符合自定义验证,是否设置setCustomValidity(); 自定义验证
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id
Formaction : 在submit里定义提交地址
用法如下:
if(input.validity && !input.validity.valid){ if(input.validity.valueMissing){ alert("不能为空") }else if(input.validity.typeMismatch){ alert("控件值与预期类型不匹配"); }}
8、禁用验证
有验证就有禁止,我们可以在form标签中添加novalidate属性,可以让表单不自行验证。如果提交按钮有多个,为了指定点击某一个提交按钮不必验证表单,可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。
如下:
<form action="/haorooms"> <input type="text" id="text" required=""> <input type="submit" value="跳过验证,直接提交" formnovalidate></form><form action="/haorooms" novalidate> <input type="text" id="text" required=""> <input type="submit" value="直接提交"></form>
9、去掉chrome记住密码后自动填充表单的黄色背景
在前面介绍方法基础上,我这里再补充一些!
设置表单属性 autocomplete=”off/on” 关闭自动填充表单,自己实现记住密码。如下:
<!-- 对整个表单设置 --><form autocomplete="off" method=".." action=".."><!-- 或对单一元素设置 --><input type="text" name="textboxname" autocomplete="off">
同样,对应纯色表单,可以添加如下样式去除
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #2390cc inset; }
10、multiple属性
<form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" /> <input type="submit" /></form>
可以接受多个值的文件上传!
<select multiple="multiple" size="2"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option></select>
select中的multiple可以同时选择多个选项,把 multiple 属性与 size 属性配合使用,来定义可见选项的数目。
- 一些html5表单知识及EventUtil对象完善
- eventutil 跨浏览器事件对象
- EventUtil
- HTML5的一些表单类型
- 完善:HTML5表单新特征简介与举例
- 完善:HTML5表单新特征简介与举例
- 表单的一些重要知识
- html5本地存储及表单
- EventUtil 跨浏览器事件处理对象
- PHP结合HTML5使用FormData对象提交表单及上传图片
- HTML5的一些表单新特性
- 实体转json串。能满足普通list的转换。。及一些些简单的对象.对象.属性的转换《还未完善--对象.集合》
- javascript html5 game 开发的一些知识
- javascript html5 game 开发的一些知识
- 面向对象的一些知识
- 面向对象的一些知识
- HTML5表单标签及标签属性总结
- (二)Html5创建表单及按钮
- 《Java源码分析》:ReentrantLock.unlock 释放锁
- 安装CDH的超详细步骤
- getRawX(),getRawY(),getX(),getY(),getScrollX(),getScrollY()区别
- 268. Missing Number
- Ubuntu+Visual Studio Code
- 一些html5表单知识及EventUtil对象完善
- HTTPS解析
- List与Set的区别,和Collection
- shell 脚本中的if else
- 蓝牙协议分析(2)_协议架构
- 浅析DevOps解决方案的变迁
- 阿姆达尔定律以及古斯塔夫森定律干货
- mysql 查询优化理解
- centos7 安装完成后提示ifconfig命令不存在