这是自动完成的每个浏览器，除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS，那么用jQuery?
当前回答
/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }
其他回答
这是一个css的解决方案(目前，只适用于WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}
使用SCSS和http://bourbon.io/，这个解决方案简单，优雅，并适用于所有的web浏览器:
input:focus {
@include placeholder() {
color: transparent;
}
}
用波旁威士忌!这对你有好处!
不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。
例如，在下面的邮箱中，点击里面的占位符文字会消失，点击外面的文字会重新出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }
我喜欢将其打包到名称空间中，并在带有“占位符”属性的元素上运行……
$("[placeholder]").togglePlaceholder();
$.fn.togglePlaceholder = function() {
return this.each(function() {
$(this)
.data("holder", $(this).attr("placeholder"))
.focusin(function(){
$(this).attr('placeholder','');
})
.focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
});
};
