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

Posted 2023-03-05

【中文标题】在 Chrome 中清除焦点上的 HTML5 占位符属性文本

【英文标题】：Clear HTML5 placeholder attribute text on focus in Chrome

【发布时间】：2012-10-01 01:35:12

【问题描述】：

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

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

Demo Fiddle

Chrome 预览版（聚焦）

Firefox 预览版（聚焦）

【问题讨论】：

不要触碰用户预期的行为！

@Bondye 如果文本没有在焦点上清除，这实际上很烦人..

我认为如果文本在焦点上被清除会更烦人。因为他没有在输入中附加标签或名称。所以当我专注时，我不知道我在关注什么......

@Bondye 我确实向他们展示了他们在哪个领域，所以毫无疑问不知道用户关注的是什么；）

那你为什么要使用占位符呢？

【参考方案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;

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