在HTML5移動開發中,通過這些新的輸入框類型來顯示定制後的鍵盤布局,用戶體驗更好,更容易填寫各種表單
本文中,實測手機為腎4S與米4
定義input類型為type="number"時,iOS顯示數字、標點及符號鍵盤,Android顯示撥號鍵盤。代碼如下所示
1<input type=
"number"
id=
"number"
name=
"number"
/>
附圖:左圖iOS右圖Android
定義input類型為type="tel"時,iOS與Android都顯示撥號鍵盤。代碼如下所示
1<input type=
"tel"
id=
"tel"
name=
"tel"
/>
附圖:左圖iOS右圖Android
定義input類型為type="email"時,iOS與Android都顯示字母及電子郵件符號鍵盤。代碼如下所示
1<input type=
"email"
id=
"email"
name=
"email"
/>
附圖:左圖iOS右圖Android
定義input類型為type="url"時,iOS與Android都顯示字母及鏈接符號鍵盤。代碼如下所示
1<input type=
"url"
id=
"url"
name=
"url"
/>
附圖:左圖iOS右圖Android
定義input類型為type="date"時,iOS與Android都顯示日期拾取器,風格差異很大。代碼如下所示
1<input type=
"date"
id=
"date"
name=
"date"
/>
附圖:左圖iOS右圖Android
定義input類型為type="time"時,iOS與Android都顯示時間拾取器,風格差異很大。代碼如下所示
1<input type=
"time"
id=
"time"
name=
"time"
/>
附圖:左圖iOS右圖Android
定義input類型為type="datetime"時,iOS調用失敗,Android依次顯示日期時間拾取器。代碼如下所示
1<input type=
"datetime"
id=
"datetime"
name=
"datetime"
/>
附圖:左圖iOS右圖Android
定義input類型為type="month"時,iOS顯示月份拾取器,Android顯示日期拾取器但是只記錄年份與月份。代碼如下所示
1<input type=
"month"
id=
"month"
name=
"month"
/>
附圖:左圖iOS右圖Android
HTML5新增的標簽和廢除的標簽 http://www.linuxidc.com/Linux/2016-01/127516.htm
40 個重要的 HTML5 面試題及答案 http://www.linuxidc.com/Linux/2015-12/126824.htm
HTML5與CSS3基礎教程(第8版)中文高清版 PDF http://www.linuxidc.com/Linux/2015-12/125734.htm
HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm
關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm