这是自动完成的每个浏览器，除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS，那么用jQuery?
当前回答
对于一个纯基于CSS的解决方案:
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
注意: 尚未被所有浏览器供应商支持。
参考:Ilia Raiskin用CSS隐藏焦点上的占位符文本。
其他回答
HTML:
<input type="text" name="name" placeholder="enter your text" id="myInput" />
jQuery:
$('#myInput').focus(function(){
$(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
$(this).attr('placeholder','enter your text');
});
Toni的答案很好，但我宁愿放弃ID并显式使用输入，这样所有带有占位符的输入都能获得行为:
<input type="text" placeholder="your text" />
注意$(function(){});$(document).ready(function(){})的简写:
$(function(){
$('input').data('holder',$('input').attr('placeholder'));
$('input').focusin(function(){
$(this).attr('placeholder','');
});
$('input').focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
})
演示。
这是一个css的解决方案(目前，只适用于WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}
对于一个纯基于CSS的解决方案:
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
注意: 尚未被所有浏览器供应商支持。
参考:Ilia Raiskin用CSS隐藏焦点上的占位符文本。
有时你需要特异性来确保你的风格应用于最强的因素id，谢谢@Rob Fletcher的精彩回答，在我们公司我们使用过
因此，请考虑添加带有应用程序容器id前缀的样式
#app input:focus::-webkit-input-placeholder， #app textarea:focus::-webkit-input-placeholder { 颜色:# FFFFFF; ｝ #app input:focus:-moz-placeholder， #app textarea:focus:-moz-placeholder { 颜色:# FFFFFF; ｝
