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后宝妈。