清除HTML中焦点的HTML5占位符属性文本

Question

有什么方法可以清除{strong> Chrome 中关注焦点的placeholder文字，Firefox会清除焦点上的文字但Chrome不会。

这会使用户混淆条形图中的文本是否被键入，或者它是占位符文本（即使我将文本颜色更改为浅灰色），我不想为此使用不必要的JavaScript或jQuery，我想要知道是否有一些HTML / CSS解决方案

Demo Fiddle

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

input:hover::placeholder 
{
  color: transparent;
}

    <input type="text" id="fname" name="firstname" placeholder="Your name..">

Answer 5

我发现Shubhanshu的解决方案对我不起作用，但我确实在CSS tricks上找到了可以在Chrome中运行的解决方案，但它似乎并不适用于FF。

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}