这是自动完成的每个浏览器，除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS，那么用jQuery?
当前回答
有时你需要特异性来确保你的风格应用于最强的因素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; ｝
其他回答
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
$("input[placeholder]").each(function () {
$(this).attr("data-placeholder", this.placeholder);
$(this).bind("focus", function () {
this.placeholder = '';
});
$(this).bind("blur", function () {
this.placeholder = $(this).attr("data-placeholder");
});
});
输入
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
对于文本区域
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
有时你需要特异性来确保你的风格应用于最强的因素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; ｝
为了进一步细化Wallace Sidhrée的代码示例:
$(function()
{
$('input').focusin(function()
{
input = $(this);
input.data('place-holder-text', input.attr('placeholder'))
input.attr('placeholder', '');
});
$('input').focusout(function()
{
input = $(this);
input.attr('placeholder', input.data('place-holder-text'));
});
})
这确保每个输入在data属性中存储正确的占位符文本。
在jsFiddle中可以看到一个工作示例。
