在 Chrome 中清除焦点上的 HTML5 占位符属性文本答案

【问题标题】：Clear HTML5 placeholder attribute text on focus in Chrome在 Chrome 中清除焦点上的 HTML5 占位符属性文本
【发布时间】：2012-10-01 01:35:12
【问题描述】：

有什么方法可以在 Chrome 中清除焦点上的 placeholder 文本，Firefox 会清除焦点上的文本，但 Chrome 不会。

这会让用户感到困惑，无论是输入栏中的文本还是占位符文本（即使我将文本颜色更改为浅灰色），我不想为此使用不必要的 JavaScript 或 jQuery，我想要知道是否有一些 HTML/CSS 解决方案

Demo Fiddle

Chrome 预览版（聚焦）

Firefox 预览版（聚焦）

【问题讨论】：

不要触碰用户预期的行为！
@Bondye 如果文本没有在焦点上清除，这实际上很烦人..
我认为如果文本在焦点上被清除会更烦人。因为他没有在输入中附加标签或名称。所以当我专注时，我不知道我在关注什么......
@Bondye 我确实向他们展示了他们在哪个领域，所以毫无疑问不知道用户关注的是什么；）
那你为什么要使用占位符呢？

标签： css html google-chrome

【解决方案1】：

尝试使用

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

它将解决问题。由于页面加载时自动聚焦，因此文本在聚焦时可见。

【讨论】：

你去吧，CSS总是有一个解决一切的办法;)
cough 使用 hacky 浏览器特定标签 cough :)
太棒了 :) 我必须将它与 !important 标签一起使用，然后它才能正常工作

【解决方案2】：

现在 Firefox 以其他方式工作，所以我使用了以下代码：

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}

【讨论】：

2 年后，在这个问题中，我认为这是最有效的问题

【解决方案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');
    });
  }
});

【讨论】：

这个答案值得关注，它与浏览器兼容，而其他的则是“-webkit-”特定的。
$.browser 已经被弃用很长时间了。为了仍然使用它，您需要在核心 jQuery 库之后加载 jQuery 的迁移脚本。我建议改用 CSS 修复。

【解决方案4】：

我发现 Shubhanshu 的解决方案对我不起作用，但我确实在 CSS tricks 上找到了这个在 Chrome 中有效，但似乎在 FF 中无效。

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

【讨论】：

【解决方案5】：

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

    &lt;input type="text" id="fname" name="firstname" placeholder="Your name.."&gt;

【讨论】：