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