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颜色
}

效果如下：

看着是给力了，但是获取焦点，呵呵，不动，没任何效果。要想办法在获取焦点的时候清除一下内容。于是再来努力一把：

<div class="item-input">
    <input readonly="true" type="date" name="deadline" placeholder="请选择时间" value="" onfocus="this.removeAttribute('placeholder')">
</div>

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

微笑的人运气不会太差，前进的脚步可以放大。嘿嘿。来自一枚90后宝妈。