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

Question

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

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

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

Answer 1

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

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

Answer 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'));});
});

Answer 3

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