input 的placeholder不顯示如何解決

安丹發表於2018-09-26

寫在前面：近期開始在整理一些東西，“一孕傻三年”的模式快要結束，但是腦袋瓜還是妥妥的記不住事情。總結一些自己平時踩過的坑，希望能給別人帶來些許便利。

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

input 的placeholder不顯示如何解決
遇見問題第一反應就得想辦法解決問題。程式碼貼下：

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

1、首先確定一下，value中是不是悄悄攜帶了個空格來搗亂。因為當value有值的時候，placeholder不顯示是正常的。我看了好幾次，沒出現這樣低階錯誤，還好。
2、考慮input的type="date"是比較特殊情況，需要將placeholder的內容強行放content裡。
css程式碼加一下：

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

效果如下：

input 的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後寶媽。

相關文章