这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
用纯CSS,它为我工作。使它在输入/聚焦时透明
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: transparent !important;
}
input:focus::-moz-placeholder { /* Firefox 19+ */
color: transparent !important;
}
input:focus:-ms-input-placeholder { /* IE 10+ */
color: transparent !important;
}
input:focus:-moz-placeholder { /* Firefox 18- */
color: transparent !important;
}
其他回答
我喜欢将其打包到名称空间中,并在带有“占位符”属性的元素上运行……
$("[placeholder]").togglePlaceholder();
$.fn.togglePlaceholder = function() {
return this.each(function() {
$(this)
.data("holder", $(this).attr("placeholder"))
.focusin(function(){
$(this).attr('placeholder','');
})
.focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
});
};
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');
});
和我在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;
}
下面这段CSS对我来说很有用:
input:focus::-webkit-input-placeholder {
color:transparent;
}
使用SCSS和http://bourbon.io/,这个解决方案简单,优雅,并适用于所有的web浏览器:
input:focus {
@include placeholder() {
color: transparent;
}
}
用波旁威士忌!这对你有好处!