HTML基礎篇-14時間類表單元素

傳統的時間選擇，早已不能滿足現代的體驗和需求，在HTML5里早已經有一套很成熟的原生時間選擇控件，在體驗上更佳，尤其是手機端，會直接調用系統級的時間組件。

標

如何設置時間類表單元素？

時間選擇表單元素

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

傳統的時間選擇

日期控件--date

通過type="date"

可以快速選擇日期

<input type="date" />

日期控件

PC端

手機端

時間控件-- time

通過type="time"

快速選擇時間

<input type="time" />

時間控件

pc端

手機端

月份控件--month

通過type="month"

快速選擇月份

<input type="month" />

月份控件

pc端

手機端

周控件--week

通過type="week"

快速選擇周

<input type="week" />

周控件

pc端

手機端

日期時間控件--datetime-local

通過type="datetime-local"

選擇時間和日期

<input type="datetime-local" />

日期時間控件

pc端

手機端

總結

思維導圖

evExpress

本文檔全面介紹了DevExpress WPF主題以及如何應用主題。

DevExpress WPF不僅能開發友好的桌面端應用，還具備良好的觸摸支持功能。最終用戶可以在移動端通過觸摸的方式與應用程序進行交互。

你也可以下載Universal安裝包或者到DevExpress中文網查看更多示例和教程

使用教程

在開始菜單打開C1LicenseActivation.exe，可以對產品進行激活和反激活。本文討論離線激活C1步驟。

在本教程中，我們將為您展示如何在數據網格的頁腳中顯示摘要信息行。

在前兩個部分中，我們分別為大家介紹了如何使用XAML代碼和C#代碼添加一個標記標簽。本文就此基礎上，介紹當圖表展示后，如何使用代碼更新窗體上的標簽元素。

C1Chart可以導出成不同的格式，比如PDF和Excel。本篇內容主要描述C1Chart的導出，導出成PDF和導出到Excel。

更新資訊

Qt v5.6正式發布，我們相信擁有一個獨立于平臺的軟件戰略可以最大限度地減少維護工作，同時能加快您將產品推向市場的時間。

新一代的HTML5/JavaScript UI控件Wijmo Enterprise正式發布2016 v1，新版本為每一個UI控件都提供了Angular 2組件，同時Wijmo企業版已經包含OLAP等。

提供原生跨平臺HTML5應用開發體驗Kendo UI Professional正式發布Q1 2016 SP1，新版本更新kendo.culture.da-DK.js、新增showText方法編碼HTML實體從而更好的防止XSS攻擊等。

慧都科技，十三年行業經驗，專注提供軟件技術整體解決方案，致力打造全球最大的軟件技術一站式服務平臺。

慧都控件｜幫助企業打造成功軟件

慧都提供全球優質控件產品/控件培訓/項目定制開發/方案咨詢/現場實施/項目外包/專業測試

微信ID：EVGET_Huidu

企業QQ：800018081｜電話：023-66090381

掃碼關注微信

、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。

在線咨詢

上一篇：HTML代碼中的空格和空行
下一篇：Html5網站的特點有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商