这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
纯CSS解决方案(不需要JS)
基于@Hexodus和@Casey Chu的回答,这里是一个更新的跨浏览器解决方案,利用CSS不透明和过渡淡出占位符文本。它适用于任何可以使用占位符的元素,包括文本区域和输入标记。
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */ :-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */ ::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */ :-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */ ::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */ *:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */ *:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */ *:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */ *:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */ *:focus::placeholder { opacity: 0; } /* Modern Browsers */ <div> <div><label for="a">Input:</label></div> <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60"> </div> <br> <div> <div><label for="b">Textarea:</label></div> <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea> </div>
修正
编辑1(2017):更新以支持现代浏览器。 编辑2(2020):添加了可运行的堆栈片段。
其他回答
为了增强@casey-chu和pirate rob的回答,这里有一个更跨浏览器兼容的方法:
/* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }
/* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }
/* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }
/* Internet Explorer 10+ */
input:focus:-ms-input-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; }
任何版本的Angular
只需将其添加到.css文件中
.hide_placeholder:focus::placeholder {
color: transparent;
}
在课堂上使用
<input class="hide_placeholder"
试试这个函数:
+它隐藏占位符在焦点上,并返回它在模糊
+这个函数依赖于占位符选择器,首先它选择具有占位符属性的元素,触发一个聚焦函数,另一个模糊函数。
重点:它向元素添加了一个属性“data-text”,该属性从占位符属性中获取其值,然后它删除了占位符属性的值。
在模糊:它返回占位符值,并从数据文本属性中删除它
<input type="text" placeholder="Username" />
$('[placeholder]').focus(function() {
$(this).attr('data-text', $(this).attr('placeholder'));
$(this).attr('placeholder', '');
}).blur(function() {
$(this).attr('placeholder', $(this).attr('data-text'));
$(this).attr('data-text', '');
});
});
如果您通过检查输入元素来了解幕后发生的事情,您就可以很好地理解我的意思
下面这段CSS对我来说很有用:
input:focus::-webkit-input-placeholder {
color:transparent;
}