手機端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; }