javascript遇到html5的一些表单属性


Posted in Javascript onJuly 05, 2015

input属性:
placeholder:输入框的默认值,向用户显示描述性说明文字或者提示信息

autocomplete:值为on和off。。on则代表当该字段填写并提交后再返回该页,再输入时会显示以前输入的。off则是关闭,包含用户输入数据的安全。默认为on
autofocus:页面载入时设置某个input自动获取焦点,注意该页面只能设置一个input的这个属性,设置多个相当于没有设置。
list特性和datalist:通过list为某个输入框增加下拉列表。。相当于js实现的“自动完成”功能,但是不能进行模糊查询
如果datalist内有2项值:"a34343"和"并24234",用户希望的是输入了3后这2个值都出现,但实际上一个也不出现。
它要求是完全匹配,比如输入a,则下拉a34343出现,接着输入4,那么这个下拉值也就没有了。

required:表单提交前该元素必须填写,即不能为空。不建议使用,因为提示信息‘请填写此字段',除非有属性可以代替该提示信息。
pattern:给input标签内写正则的地方。。type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。。
不建议给type为email或url的元素使用,因为提示信息固定,正则固定。。还不如js直接重写。

一些输入设置:
rangeUnderflow 限制数值控件的最小值 设置min, input type="number" min="0" value="20"
rangeOverflow 限制数值控件的最大值 设置max,input type="number" max="100" value="20"
stepMismatch 确保输入值符合min,max,step的设置 设置max min step, input type="number" min="0" max="100" step="10" value="20"
</pre>

下面是input=number用的一个小函数:

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围:使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字:',km.badInput,'超出范围:',km.rangeOverflow,'小于最小值:',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

list特性和datalist:

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url:<input type="url" name="url" form="register" required/><br />
user:<input type="text" name="user" value="" form="register"/><br />
pwd:<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

正则:<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>

邮箱:<input type="email" name="youxinag" value="" placeholder="这是默认值" autofocus="autofocus" form="register" required="required" /><br />
地址:<input type="url" name="url" form="register" form="register"/>
DATE:<input type="date" name="riqi" value="" form="register"/><br />
TIME:<input type="time" name="shijian" value=""/>
MONTH:<input type="month" name="yue" value="" />
周:<input type="week" name="zhou" value="" />
数字:<input type="number" name="suzhi" value="" form="register" /><br />
滑动条<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
颜色:<input type="color" name="huadong" form="register"/><br />
<input type="file" id="a33" />

自动填充表单<br/>

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

输出表单output

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
微信小程序实现图片上传
May 23 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
javascript常用功能汇总
Jul 05 #Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 #Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 #Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 #Javascript
jQuery动态背景图片效果实现方法
Jul 03 #Javascript
You might like
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python深入学习之对象的属性
2014/08/31 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python学生管理系统学习笔记
2019/03/19 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python计算auc的方法
2020/09/09 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
电子商务专业推荐信范文
2013/12/02 职场文书
中学生个人自我评价
2014/02/06 职场文书
甜品店创业计划书
2014/08/14 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
物业保洁员管理制度
2015/08/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang