傳統(tǒng)的時(shí)間選擇，早已不能滿足現(xiàn)代的體驗(yàn)和需求，在HTML5里早已經(jīng)有一套很成熟的原生時(shí)間選擇控件，在體驗(yàn)上更佳，尤其是手機(jī)端，會(huì)直接調(diào)用系統(tǒng)級(jí)的時(shí)間組件。

標(biāo)

1. 如何設(shè)置時(shí)間類表單元素？

時(shí)間選擇表單元素

可以快速選擇時(shí)間、日期、月份等。在各大網(wǎng)站的表單里普遍使用。

日期控件--date

通過type="date"

可以快速選擇日期

<input type="date" />

時(shí)間控件-- time

通過type="time"

快速選擇時(shí)間

<input type="time" />

月份控件--month

通過type="month"

快速選擇月份

<input type="month" />

周控件--week

通過type="week"

快速選擇周

<input type="week" />

日期時(shí)間控件--datetime-local

通過type="datetime-local"

選擇時(shí)間和日期

<input type="datetime-local" />

總結(jié)

、h5網(wǎng)站input 設(shè)置為type=number的問題

h5網(wǎng)頁(yè)input 的type設(shè)置為number一般會(huì)產(chǎn)生三個(gè)問題，一個(gè)問題是maxlength屬性不好用了。另外一個(gè)是form提交的時(shí)候，默認(rèn)給取整了。三是部分安卓手機(jī)出現(xiàn)樣式問題。

問題一解決

問題二，是因?yàn)閒orm提交默認(rèn)做了表單驗(yàn)證，step默認(rèn)是1,要設(shè)置step屬性，假如保留2位小數(shù)，寫法如下：

關(guān)于step，我在這里做簡(jiǎn)單的介紹，input 中type=number，一般會(huì)自動(dòng)生成一個(gè)上下箭頭，點(diǎn)擊上箭頭默認(rèn)增加一個(gè)step，點(diǎn)擊下箭頭默認(rèn)會(huì)減少一個(gè)step。number中默認(rèn)step是1。也就是step=0.01,可以允許輸入2位小數(shù)，并且點(diǎn)擊上下箭頭分別增加0.01和減少0.01。

假如step和min一起使用，那么數(shù)值必須在min和max之間。

看下面的例子：

輸入框可以輸入哪些數(shù)字？

首先，最小值是1，那么可以輸入1.0，第二個(gè)是可以輸入（1+3.1）那就是4.1,以此類推，每次點(diǎn)擊上下箭頭都會(huì)增加或者減少3.1，輸入其他數(shù)字無效。這就是step的簡(jiǎn)單介紹。

問題三，去除input默認(rèn)樣式

二、ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋

解決方式如下：

三、IOS鍵盤字母輸入，默認(rèn)首字母大寫

設(shè)置如下屬性

四、select 下拉選擇設(shè)置右對(duì)齊

五、通過transform進(jìn)行skew變形，rotate旋轉(zhuǎn)會(huì)造成出現(xiàn)鋸齒現(xiàn)象

六、移動(dòng)端點(diǎn)透問題

案例如下：

div是絕對(duì)定位的蒙層,并且z-index高于a。而a標(biāo)簽是頁(yè)面中的一個(gè)鏈接，我們給div綁定tap事件：

我們點(diǎn)擊蒙層時(shí) div正常消失，但是當(dāng)我們?cè)赼標(biāo)簽上點(diǎn)擊蒙層時(shí)，發(fā)現(xiàn)a鏈接被觸發(fā)，這就是所謂的點(diǎn)透事件。

原因：

touchstart 早于 touchend 早于click。亦即click的觸發(fā)是有延遲的，這個(gè)時(shí)間大概在300ms左右，也就是說我們tap觸發(fā)之后蒙層隱藏，此時(shí) click還沒有觸發(fā)，300ms之后由于蒙層隱藏，我們的click觸發(fā)到了下面的a鏈接上。

解決:

1、 盡量都使用touch事件來替換click事件。

2 、用preventDefault阻止a標(biāo)簽的click

七、消除 IE10 里面的那個(gè)叉號(hào)

八、關(guān)于 iOS 與 OS X 端字體的優(yōu)化(橫豎屏?xí)霈F(xiàn)字體加粗不一致等)

iOS 瀏覽器橫屏?xí)r會(huì)重置字體大小，設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會(huì)失效，因此最佳方案是將 text-size-adjust 為 100% 。

九、關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時(shí)，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格

可以通過正則去掉

十、移動(dòng)端 HTML5 audio autoplay 失效問題

這個(gè)不是 BUG，由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻，會(huì)給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放。

解決方法思路：先通過用戶 touchstart 觸碰，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）。

解決代碼：

十一、移動(dòng)端 HTML5 input date 不支持 placeholder 問題

這個(gè)我感覺沒有什么好的解決方案，用如下方法

十二、部分機(jī)型存在type為search的input，自帶close按鈕樣式修改方法

有些機(jī)型的搜索input控件會(huì)自帶close按鈕（一個(gè)偽元素），而通常為了兼容所有瀏覽器，我們會(huì)自己實(shí)現(xiàn)一個(gè)，此時(shí)去掉原生close按鈕的方法為

如果想使用原生close按鈕，又想使其符合設(shè)計(jì)風(fēng)格，可以對(duì)這個(gè)偽元素的樣式進(jìn)行修改。

十三、喚起select的option展開

zepto方式:

原生js方式:

做一個(gè)有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833。