清除Chrome中焦点上的HTML5占位符属性文本
清除Chrome中焦点上的HTML5占位符属性文本
提问于 2012-10-10 22:25:05
有没有办法在 Chrome 中清除焦点上的placeholder文本，火狐会清除焦点上的文本，但Chrome不会。
这使用户感到困惑，无论栏中的文本是键入的，还是占位符文本(即使我将文本颜色更改为浅灰色)，我不想为此使用不必要的JavaScript或jQuery，我想知道是否有一些HTML/CSS解决方案
Chrome预览(焦点)
Firefox预览(焦点)
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-10-10 22:28:50
尝试使用
input:focus::-webkit-input-placeholder
{
color: transparent;
}它会解决这个问题。文本在焦点上是可见的，因为页面加载时会自动聚焦。
Stack Overflow用户
发布于 2013-08-16 15:57:37
现在firefox以另一种方式工作，所以我使用了以下代码：
input:focus::-webkit-input-placeholder{
color: transparent!important;
}
input:focus::-moz-placeholder{
color: transparent!important;
}
input:focus:-moz-placeholder{
color: transparent!important;
}Stack Overflow用户
发布于 2012-10-10 22:27:53
这就是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');
});
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12821746
复制相关文章
相似问题