input 的placeholder不顯示如何解決

寫在前面：近期開始在整理一些東西，「一孕傻三年」的模式快要結束，可是腦殼瓜仍是妥妥的記不住事情。總結一些本身平時踩過的坑，但願能給別人帶來些許便利。

昨天在寫input的時候，發現placeholder老是不顯示。在谷歌模擬下，只看見顯示了「年/月/日」，手機上白白的，什麼也木有。這樣的用戶體驗確定是要被打死的！效果貼下：

碰見問題第一反應就得想辦法解決問題。代碼貼下：

<div class="item-input">
    <input type="date" name="deadline" placeholder="請選擇時間" value="">
</div>
複製代碼

一、首先肯定一下，value中是否是悄悄攜帶了個空格來搗亂。由於當value有值的時候，placeholder不顯示是正常的。我看了好幾回，沒出現這樣低級錯誤，還好。
二、考慮input的type="date"是比較特殊狀況，須要將placeholder的內容強行放content裏。
css代碼加一下：

input[type="date"]:before {
	content: attr(placeholder); //強制給placeholder屬性
	color: #aaa; //修改一下placeholder顏色
}
複製代碼

效果以下：

看着是給力了，可是獲取焦點，呵呵，不動，沒任何效果。要想辦法在獲取焦點的時候清除一下內容。因而再來努力一把：

<div class="item-input">
    <input readonly="true" type="date" name="deadline" placeholder="請選擇時間" value="" onfocus="this.removeAttribute('placeholder')">
</div>
複製代碼

加上js代碼onfocus="this.removeAttribute('placeholder')" 簡直不要太完美。哈哈，搞定！

微笑的人運氣不會太差，前進的腳步能夠放大。嘿嘿。來自一枚90後寶媽。