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

我猜我必须专门针对Chrome。

有解决方案吗?

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


当前回答

除此之外,我有两个想法。

您可以添加一个模仿palceholder的元素。然后使用javascript控制元素的显示和隐藏。

但它太复杂了,另一个是用兄弟的css选择器。就像这样:

.占位符{位置:绝对;字体大小:14 px;左:40像素;上图:11 px;行高:1;pointer-events:没有;} .send消息输入:焦点+ .占位符{显示:无;}

23333,我的英语很差。希望能解决你的问题。

其他回答

对于一个纯基于CSS的解决方案:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

注意: 尚未被所有浏览器供应商支持。

参考:Ilia Raiskin用CSS隐藏焦点上的占位符文本。

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

2018 > JQUERY v3.3解决方案: 工作全局为所有输入,文本区域与占位符。

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

和我在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;
}

任何版本的Angular

只需将其添加到.css文件中

.hide_placeholder:focus::placeholder {
  color: transparent;
}

在课堂上使用

<input class="hide_placeholder"