手機端input[type=date]的時候placeholder不起作用解決方案
手機端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; } |