这是自动完成的每个浏览器,除了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; }

其他回答

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

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

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

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

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

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

我喜欢css的过渡方法。在Focus上,占位符淡出;)也适用于文本区域。

谢谢凯西·朱的好主意。

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}
$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

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