占位符在 Chrome 中聚焦时不会消失

Posted 2023-03-05

【中文标题】占位符在 Chrome 中聚焦时不会消失

【英文标题】：Placeholder doesn't disappear upon focus in Chrome

【发布时间】：2012-08-02 06:30:43

【问题描述】：

我根据下面的代码创建了一个输入。

<div>
  <form id="me" runat="server">
  <input id="stuff" type="text" placeholder="Type here" runat="server" />
  </form>
</div>

正如预期的那样，当我开始输入时，占位符文本消失了。这在 Burning Cat 浏览器中可以正常工作，但在 Shiny Metal 浏览器中却不行。是什么导致它（样式，服务器标签，其他东西......）？有什么办法呢？

【参考方案1】：

我今天遇到了同样的问题，我想出了一个纯 CSS 解决方案 hack：

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

【讨论】：

+1 表示创造力，但我需要指出 - 虽然我非常喜欢这种方法 - 但它不是解决方案。这是一种解决方法。我仍然声称这是 chrome 中的一个错误。 :)

我完全不同意。文本应该默认保留，因为有些人想使用它。如果您不想要它，请使用此解决方案而不是 hack 来设计它。它正在做它被提供做的事情。

@dg988 当输入聚焦时占位符仍然存在的问题是它可能与预填充的数据混淆。当占位符在焦点上消失时，它会更加清晰。我知道占位符的样式应该清楚地表明它是一个；但这通常是不够的。

您有权发表您的意见，并且有这样的意见，您可以将文本样式设置为焦点，但不要告诉我它不应该以我们都可以的方式工作实现我们想要的，因为您更喜欢自己的方式。

@dg988 我什么都没告诉你。我所说的只是使用透明颜色来隐藏占位符是一种 hack。一个解决方案是如果我可以设置 display: none，但它不起作用。 color: transparent 表示占位符仍然存在，但它是“用透明墨水书写的”。这不是很语义化。

【参考方案2】：

Firefox 和 chrome（和 safari）在 html5 占位符上的行为不同。如果您希望 chrome 消除焦点上的占位符，可以使用以下脚本：

$('input:text, textarea').each(function()
    var $this = $(this);
    $this.data('placeholder', $this.attr('placeholder'))
         .focus(function()$this.removeAttr('placeholder');)
         .blur(function()$this.attr('placeholder', $this.data('placeholder')););
);

【讨论】：

我想将此行为视为错误。我的意思是，如果我需要添加一些 JS 以使占位符消失，则必须将其称为变通方法。或者它的行为方式是否有正当理由？

我真的很喜欢用 Chrome 做占位符的方式。它允许您使用占位符文本作为表单字段标签，即使您的页面加载集中在其中一个字段上。

选择器应该是$('[placeholder]')，因为有很多输入类型不是文本或文本区域（电子邮件等），并且可以有占位符。此外，新的 jQuery 不喜欢（不幸的是）:text 选择器。

@xamde：是的，我也喜欢。 （另外，FF 的新版本就像 Chrome）

请注意，Chrome（现在是 Firefox）的行为与 WHATWG 标准的建议相反：“当元素的值为空字符串或控件为不聚焦（或两者），例如通过在空白的不聚焦控件中显示它并以其他方式隐藏它。” (whatwg.org/specs/web-apps/current-work/multipage/…)

【参考方案3】：

您可以使用这个占位符 jquery 插件：placeholderFix。 有了这个插件，占位符标签在所有浏览器中的工作方式都是一样的，在不支持它的浏览器中也是如此。