H5系列之新input
虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好。基本只有google浏览器能用。但是既然出了,那么就要了解他,知道有这么一个东西就好。
input类型:
color 兼容情况(支持:google,opera)
允许用户从取色器中选一个颜色
<input type="color">
date 兼容情况(支持:google,opera,safari)
允许用户从一个日期选择器中选取一个日期
<input type="date">
datatime 兼容情况(支持:safari) w3school 里面显示 opera浏览器兼容,但是实测,不行。
由于没有mac系统,就实验不了了- -
datetime-local 兼容情况(支持:google,opera,safari)
允许用户选择日期和时间
email 兼容情况(支持:ie,google,opera,firefox)
在提交表单的时候,会验证用户输入的 email格式是否有效
month 兼容情况(支持:google,opera,safari)
允许用户选择一个年份和月份没有日期
number 兼容情况(支持:ie,google,opera,safari)
设置文本框只能输入数字,其他字母不允许。
<input type="number" min="1" max="10">
允许添加限定:
disabled | 规定输入字段是禁用的 |
max | 规定允许的最大值 |
maxlength | 规定输入字段的最大字符长度 |
min | 规定允许的最小值 |
pattern | 规定用于验证输入字段的模式 |
readonly | 规定输入字段的值无法修改 |
required | 规定输入字段的值是必需的 |
size | 规定输入字段中的可见字符数 |
step | 规定输入字段的合法数字间隔 |
value |
规定输入字段的默认值 |
range 兼容情况(支持:ie,google,opera,safari)
这个类型就比较好玩了,会出现一条滑动条
也有一些允许添加的限定:
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
time 兼容情况(支持:google,opera,safari)
允许用户输入或定义时间。
<input type="time">
url 兼容情况(支持:ie,google,opera,)
在提交表单的时候,会验证用户输入的 url格式是否有效
<input type="url">
week 兼容情况(支持:google,opera,safari)
允许用户选择年份,第几周
<input type="week">
H5系列之新input的更多相关文章
- H5系列之History(必知必会)
H5系列之History(必知必会) 目录 概念 兼容性 属性 方法 H5方法 概念 理解History Api的使用方式 目的是为了解决哪些问题 作用:ajax获取数据时 ...
- 三星A3、A5、A7、G7、J5、J7、S6系列等新机型的部分手机解锁 ROOT刷机
三星A3.A5.A7.G7.J5.J7.S6系列等新机型的部分手机,三星官方加了限制,需要解锁后才能刷机如果没有解锁,刷第三方recovery或者刷非官方原版固件,都会刷不进,手机跳转到提示界面,显示 ...
- Docker学习(十一)Docker系列结束-新的开始K8S
Docker学习(十一)Docker系列结束-新的开始K8S 标签(空格分隔): docke k8s Docker系列结束 上一篇讲到使用docker官方提供的容器编排工具docker-compose ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- H5系列之地理位置(必知必会)
H5之地理位置必知必会 [02]概念 规范地址:http://www.w3.org/TR/geolocation-API/ HTML5 Geolocation(地理定位)用于定位用 ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...
- JBOSS EAP 6 系列一 新特性
在项目中,采用的架构是Springmvc+spring+EJB+Jpa等架构,当然服务器是Jboss,本次Jboss我们采用的是JBossEap6.2,Jboss7的新特性与Jboss4.5的大的改变 ...
- h5 ios手机 隐藏input输入光标
前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...
随机推荐
- 使用websocket连接(对接)asp.net core signalr
使用通用websocket连接asp.net core signalr 一.背景介绍 signalr的功能很强大,可以为我们实现websocket服务端节省不少的时间.但是可能由于不同的环境,我们在对 ...
- 标签平滑(Label Smoothing)详解
什么是label smoothing? 标签平滑(Label smoothing),像L1.L2和dropout一样,是机器学习领域的一种正则化方法,通常用于分类问题,目的是防止模型在训练时过于自信地 ...
- 接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)
问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link ...
- Lambda表达式(三)
public class Test04 { public static void main(String[] args) { /* * Java8中,有一个新的类:Stream类型,它代表一个数据加工 ...
- Callable返回执行结果
使用ExecutorService.Callable.Future实现有返回结果的多线程. public class MainActivity extends AppCompatActivity { ...
- Hive 建模
date: 2020-05-24 17:55:00 updated: 2020-06-15 11:19:00 Hive 建模 1. 存储格式 textFile sequenceFile:一种Hadoo ...
- vue组件使用name属性来生成递归组件
先来个简单的数据 1 lists = [{ 2 id: 1, 3 title: '第一层', 4 children: [{ 5 id: 3, 6 title: '第二层', 7 children: [ ...
- 【实战】记一次老项目的swagger整合
1.背景 这两天接到一个整合swagger的任务,本以为很简单,预计两小时内完成,没想到其中有太多的坑,整了两天才完成. 首先项目是一个比较老的项目,之前用的servlet,目前在重构为springm ...
- Java学习的第三十九天
1.例3.7 100~200之间全部素数 package bgio; public class cjava { public static void main(String[]args) { int ...
- Django做验证码登录
验证码 关注公众号"轻松学编程"了解更多. 1.作用 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力 ...