传统的时间选择，早已不能满足现代的体验和需求，在HTML5里早已经有一套很成熟的原生时间选择控件，在体验上更佳，尤其是手机端，会直接调用系统级的时间组件。

标

1. 如何设置时间类表单元素？

时间选择表单元素

可以快速选择时间、日期、月份等。在各大网站的表单里普遍使用。

日期控件--date

通过type="date"

可以快速选择日期

<input type="date" />

时间控件-- time

通过type="time"

快速选择时间

<input type="time" />

月份控件--month

通过type="month"

快速选择月份

<input type="month" />

周控件--week

通过type="week"

快速选择周

<input type="week" />

日期时间控件--datetime-local

通过type="datetime-local"

选择时间和日期

<input type="datetime-local" />

总结

、h5网站input 设置为type=number的问题

h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。

问题一解决

问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：

关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。

假如step和min一起使用，那么数值必须在min和max之间。

看下面的例子：

输入框可以输入哪些数字？

首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。

问题三，去除input默认样式

二、ios 设置input 按钮样式会被默认样式覆盖

解决方式如下：

三、IOS键盘字母输入，默认首字母大写

设置如下属性

四、select 下拉选择设置右对齐

五、通过transform进行skew变形，rotate旋转会造成出现锯齿现象

六、移动端点透问题

案例如下：

div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。

原因：

touchstart 早于 touchend 早于click。亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏，此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。

解决:

1、 尽量都使用touch事件来替换click事件。

2 、用preventDefault阻止a标签的click

七、消除 IE10 里面的那个叉号

八、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

九、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉

十、移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

解决代码：

十一、移动端 HTML5 input date 不支持 placeholder 问题

这个我感觉没有什么好的解决方案，用如下方法

十二、部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

十三、唤起select的option展开

zepto方式:

原生js方式:

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833。