鼠标点击input输入框，placeholder在chrome浏览器下不消失的问题

我们先来看一个图片，没错就是要是实现这个效果，input或者textarea框在获取焦点后placeholder就消失的效果。

引用自 https://stackoverflow.com/questions/25242859/textarea-placeholder-not-working-on-blur-in-chrome-for-mac?r=SearchResults

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