这篇文章主要介绍了 javascript 遇到 html5 的一些表单属性的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
input 属性:
placeholder: 输入框的默认值,向用户显示描述性说明文字或者提示信息
autocomplete:值为 on 和 off。。on 则代表当该字段填写并提交后再返回该页,再输入时会显示以前输入的。off 则是关闭,包含用户输入数据的安全。默认为 on
autofocus:页面载入时设置某个 input 自动获取焦点,注意该页面只能设置一个 input 的这个属性,设置多个相当于没有设置。
list 特性和 datalist:通过 list 为某个输入框增加下拉列表。。相当于 js 实现的 "自动完成" 功能,但是不能进行模糊查询
如果 datalist 内有 2 项值:"a34343" 和 "并 24234", 用户希望的是输入了 3 后这 2 个值都出现,但实际上一个也不出现。
它要求是完全匹配,比如输入 a,则下拉 a34343 出现,接着输入 4,那么这个下拉值也就没有了。
一些输入设置:
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"
下面是 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"/>
邮箱:
地址:
DATE:
TIME:
MONTH:
周:
数字:
滑动条
搜索 :
颜色:
自动填充表单
- <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>
来源: