我们先来看一个图片,没错就是要是实现这个效果,input或者textarea框在获取焦点后placeholder就消失的效果。
Css3有个新属性placeholder,在非webkit的浏览器下input或者textarea获取焦点后,placeholder就可以消失,
显然在chrome浏览器下是不支持的。度娘里一堆好长条的js的解决方案,在stackoverflow里发现了css的解决方案,
css
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus::-moz-placeholder{ color: transparent; }
textarea:focus:-moz-placeholder{ color: transparent; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus::-moz-placeholder{ color: transparent; }
input:focus:-moz-placeholder{ color: transparent; }
HTML
<input placeholder="I am an input" />
<input placeholder="I am an input" />
<input placeholder="I am an input" />
<textarea placeholder="I am a textarea" cols="30" rows="5"></textarea>
摘自 https://stackoverflow.com/questions/25242859/textarea-placeholder-not-working-on-blur-in-chrome-for-mac?r=SearchResults