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

转载于:https://juejin.im/post/5baaf2c85188255c775da3b3

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页