手機端input[type=date]的時候placeholder不起做用解決方案

目前PC端對input 的date類型支持很差，我試下來的結果是隻有chrome支持。firefox、IE11 都不支持。並且PC端有不少日曆控件可供使用。就不去多考慮這點了。
那麼在移動端的話，ios和安卓都是支持的，可是當type類型是date的時候placeholder屬性又會失效。PC端的chrome默認顯示是「年/月/日」，但在移動端就是一片空白了。
移動端自帶的日期控件確實是個好東西。讓用戶填寫的時候體驗很好，很方便。對前端來講能夠省去驗證日期格式這一步。這麼好的東西怎麼能捨棄呢。
通過嘗試能夠設置input的 value值，但必須是日期格式纔會正確顯示，不然就會直接忽略掉。

 

1	<input type="date" value="2012-05-10" id="date">

可是在需求須要告訴用戶此處須要填寫的是什麼的時候就光是一個日期是不夠的。目前的決絕方案是結合css以及JS去解決這一問題。

CSS部分

用僞類去爲input模擬一個placeholder

 

1 2 3 4

input[type="date"]:before{     content: attr(placeholder);     color:red; }

這樣也是不夠的，你會發如今用戶選了日期之後咱們模擬的默認文字還在。

JS部分

既然咱們用到了placeholder屬性，那麼在用戶選擇的時候就刪除此屬性，以後須要的話再添加回來。

 

1 2 3 4 5 6 7

var o = document.getElementById('date'); o.onfocus = function(){     this.removeAttribute('placeholder'); }; o.onblur = function(){     if(this.value == '') this.setAttribute('placeholder','我是日期'); };

 

順便說下非date類型的input設置placeholder顏色的css

 

1 2 3

::-webkit-input-placeholder {     color:red; }