欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

input 的placeholder不显示如何解决

程序员文章站 2022-05-26 09:27:49
...

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

昨天在写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