有没有什么办法可以清除placeholder焦点在Chrome的文字,Firefox的清除焦点的文本,但Chrome不。
这混淆了用户在酒吧的文本是类型化的,或者它是一个占位符文本(即使我改变文字颜色为浅灰色),我不想使用不必要的JavaScript或jQuery的这一点,我想知道有一些HTML / CSS解决此
演示小提琴
Chrome浏览器预览 (焦点)
Firefox的预览 (焦点)
Answer 1:
尝试使用
input:focus::-webkit-input-placeholder
{
color: transparent;
}
这将解决这个问题。 该文本是由于自动对焦在页面加载焦点可见。
Answer 2:
现在,Firefox的工作在其他的方式,所以我用这个代码:
input:focus::-webkit-input-placeholder{
color: transparent!important;
}
input:focus::-moz-placeholder{
color: transparent!important;
}
input:focus:-moz-placeholder{
color: transparent!important;
}
Answer 3:
这是Chrome浏览器处理它,Chrome用户可能会希望它这样的处理。 你可以,但是,使用jQuery时,它的重点是删除“占位符”属性。
我发现了一个明显的修复你的,从谷歌组@ https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018
// Fixing Webkit that not clearing input/textarea when get focus
$(function(){
if ($.browser.webkit) {
$('input, textarea').on('focus',function(){
if ( $(this).attr('placeholder') ) $(this).data('placeholder', $(this).attr('placeholder')).removeAttr('placeholder');
}).on('blur', function(){
if ( $(this).data('placeholder') ) $(this).attr('placeholder', $(this).data('placeholder')).removeData('placeholder');
});
}
});
Answer 4:
我发现Shubhanshu的解决方案并没有为我工作,但我没有找到这对CSS技巧 ,在Chrome浏览器所做的工作,那并不似乎在FF工作虽然。
[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}
文章来源: Clear HTML5 placeholder attribute text on focus in Chrome