目前PC端對input 的date類型支持不好，我試下來的結果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日歷控件可供使用。就不去多考慮這點了。

那么在移動端的話，ios和安卓都是支持的，但是當type類型是date的時候placeholder屬性又會失效。PC端的chrome默認顯示是“年/月/日”，但在移動端就是一片空白了。

移動端自帶的日期控件確實是個好東西。讓用戶填寫的時候體驗很好，很方便。對前端來說可以省去驗證日期格式這一步。這么好的東西怎么能舍棄呢。

經過嘗試可以設置input的 value值，但必須是日期格式才會正確顯示，否則就會直接忽略掉。

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

CSS部分

用偽類去為input模擬一個placeholder

這樣也是不夠的，你會發現在用戶選了日期以后我們模擬的默認文字還在。

JS部分

既然我們用到了placeholder屬性，那么在用戶選擇的時候就刪除此屬性，之后需要的話再添加回來。

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

完整代碼

本頭條號將對以后更新的文章進行歸類，以方便大家閱讀。比如文章的標題以Bootstrap開頭，這篇文章就是關于Bootstrap的。還有一些連載的文章將有單獨的標題開頭，請各位客官留意。

轉載于:https://www.cnblogs.com/leolovexx/p/5917396.html

總結

以上是生活随笔為你收集整理的H5新特性 input type=date 在手机上默认提示显示无效解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。