虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好。基本只有google浏览器能用。但是既然出了,那么就要了解他,知道有这么一个东西就好。

input类型:

  color      

  date

  datetime

  datetime-local

  email

  month

  number

  range

  time

  url

  week

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的更多相关文章

  1. H5系列之History(必知必会)

    H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时 ...

  2. 三星A3、A5、A7、G7、J5、J7、S6系列等新机型的部分手机解锁 ROOT刷机

    三星A3.A5.A7.G7.J5.J7.S6系列等新机型的部分手机,三星官方加了限制,需要解锁后才能刷机如果没有解锁,刷第三方recovery或者刷非官方原版固件,都会刷不进,手机跳转到提示界面,显示 ...

  3. Docker学习(十一)Docker系列结束-新的开始K8S

    Docker学习(十一)Docker系列结束-新的开始K8S 标签(空格分隔): docke k8s Docker系列结束 上一篇讲到使用docker官方提供的容器编排工具docker-compose ...

  4. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  5. H5系列之地理位置(必知必会)

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  6. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  7. ASP.NET MVC3 系列教程 – 新的Layout布局系统

    原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...

  8. JBOSS EAP 6 系列一 新特性

    在项目中,采用的架构是Springmvc+spring+EJB+Jpa等架构,当然服务器是Jboss,本次Jboss我们采用的是JBossEap6.2,Jboss7的新特性与Jboss4.5的大的改变 ...

  9. h5 ios手机 隐藏input输入光标

    前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...

随机推荐

  1. 使用websocket连接(对接)asp.net core signalr

    使用通用websocket连接asp.net core signalr 一.背景介绍 signalr的功能很强大,可以为我们实现websocket服务端节省不少的时间.但是可能由于不同的环境,我们在对 ...

  2. 标签平滑(Label Smoothing)详解

    什么是label smoothing? 标签平滑(Label smoothing),像L1.L2和dropout一样,是机器学习领域的一种正则化方法,通常用于分类问题,目的是防止模型在训练时过于自信地 ...

  3. 接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)

    问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link  ...

  4. Lambda表达式(三)

    public class Test04 { public static void main(String[] args) { /* * Java8中,有一个新的类:Stream类型,它代表一个数据加工 ...

  5. Callable返回执行结果

    使用ExecutorService.Callable.Future实现有返回结果的多线程. public class MainActivity extends AppCompatActivity { ...

  6. Hive 建模

    date: 2020-05-24 17:55:00 updated: 2020-06-15 11:19:00 Hive 建模 1. 存储格式 textFile sequenceFile:一种Hadoo ...

  7. vue组件使用name属性来生成递归组件

    先来个简单的数据 1 lists = [{ 2 id: 1, 3 title: '第一层', 4 children: [{ 5 id: 3, 6 title: '第二层', 7 children: [ ...

  8. 【实战】记一次老项目的swagger整合

    1.背景 这两天接到一个整合swagger的任务,本以为很简单,预计两小时内完成,没想到其中有太多的坑,整了两天才完成. 首先项目是一个比较老的项目,之前用的servlet,目前在重构为springm ...

  9. Java学习的第三十九天

    1.例3.7 100~200之间全部素数 package bgio; public class cjava { public static void main(String[]args) { int ...

  10. Django做验证码登录

    验证码 关注公众号"轻松学编程"了解更多. 1.作用 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力 ...