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 ~~解决方案~~ hack：

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。使用此插件，占位符标记将在所有浏览器中以相同的方式工作，也适用于不支持它的浏览器。

在Chrome中关注时，占位符不会消失

3 个答案: