写在前面:近期开始在整理一些东西,“一孕傻三年”的模式快要结束,但是脑袋瓜还是妥妥的记不住事情。总结一些自己平时踩过的坑,希望能给别人带来些许便利。
昨天在写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后宝妈。