占位符不会在 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。有了这个插件，占位符标记在所有浏览器中都将以相同的方式工作，在不支持它的浏览器中也是如此。