这是自动完成的每个浏览器,除了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;
}
其他回答
这是一个css的解决方案(目前,只适用于WebKit):
input:focus::-webkit-input-placeholder {
opacity: 0;
}
我喜欢将其打包到名称空间中,并在带有“占位符”属性的元素上运行……
$("[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'));
});
});
};
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);
};
});
});
如果您的输入背景颜色是白色,那么您可以将占位符文本的颜色设置为焦点,以匹配输入背景-使文本不可见;从理论上讲。如果你的输入是不同的颜色,那么只需简单地改变颜色以匹配它。
input:focus::placeholder {
color: white;
}
此外,您可以将颜色设置为“透明”,如其他答案所示。
不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。
例如,在下面的邮箱中,点击里面的占位符文字会消失,点击外面的文字会重新出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">