H5新特性 input type=date 在手機上默認提示顯示無效解決辦法


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

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

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

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

手機端type=date的時候提示不起作用解決方案

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

CSS部分

用偽類去為input模擬一個placeholder

手機端type=date的時候提示不起作用解決方案這樣也是不夠的,你會發現在用戶選了日期以后我們模擬的默認文字還在。

JS部分

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

手機端type=date的時候提示不起作用解決方案順便說下非date類型的input設置placeholder顏色的css

手機端type=date的時候提示不起作用解決方案

完整代碼

手機端type=date的時候提示不起作用解決方案

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM