这是自动完成的每个浏览器,除了Chrome。

我猜我必须专门针对Chrome。

有解决方案吗?

如果不是用CSS,那么用jQuery?


当前回答

这是一个css的解决方案(目前,只适用于WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

其他回答

输入

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; }

这是一个css的解决方案(目前,只适用于WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

和我在angular 5中应用的一样。

我创建了一个新的字符串来存储占位符

newPlaceholder:string;

然后我在输入框上使用了焦点和模糊函数(我使用的是素数ng自动完成)。

上面的占位符是从typescript中设置的

我用的两个函数是-

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

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'));
    });
})

演示。

有时你需要特异性来确保你的风格应用于最强的因素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; }