占位符在Chrome中不会消失

我已经根据下面的代码创建了一个输入。占位符在Chrome中不会消失

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

正如所料，当我开始输入时，占位符文本消失。这在Burning Cat浏览器中应该可以使用，但不能在Shiny Metal浏览器中使用。是什么导致它（样式，服务器标签，其他东西...）？可以做些什么呢？

来源

2012-08-04 Konrad Viltersten

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

来源

2012-08-09 23:55:52

我想将此认定行为的错误。我的意思是，如果我需要添加一些JS来使占位符消失，它就被称为解决方法。还是有一个合理的原因，为什么它的行为？ – 2012-08-11 08:15:08

我真的很喜欢Chrome做占位符的方式。它允许您使用占位符文本作为表单字段标签，即使您的页面加载的焦点集中在其中一个字段上。 – xamde 2012-09-11 20:46:31

选择器应该是'$（'[placeholder]'）'，因为有许多输入类型不是文本或textarea（电子邮件等），并且可以有占位符。另外，新的jQuery不喜欢（不幸）''text'选择器。 – Rudy 2013-02-04 13:08:23

您可以使用此占位符jQuery插件：placeholderFix。使用此插件，占位符标记在所有浏览器中都能以相同的方式工作，而且在不支持它的浏览器中也是如此。

来源

2012-08-18 07:23:44 user1392191

我碰到同样的问题，今天来了，我想出了一个纯CSS ~~解决方案~~黑客：

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

来源

2013-01-25 15:17:06

+1的创意，但我需要指出的是 - 虽然我**真的很喜欢**的方法 - 这不是一个解决方案。这是一个解决方法。我仍然声称这是一个铬的错误。 :) – 2013-01-25 16:39:33

此外，你错过了语言标签的语法。它应该是* lang-css *里面，最后是两个破折号“* - *”。我纠正了这个sytax，现在你的答案看起来更好了！ – 2013-01-25 16:41:24

我完全同意。我考虑用* hack *这个词代替* solution *，但由于某种原因与后者一起使用。我现在编辑了这篇文章以反映这一点。我尝试了语法标记的不同变体，但似乎没有任何工作。现在我认为它可能有效，但我没有注意到，因为颜色都很暗。谢谢您的帮助。 – 2013-01-25 18:29:37

占位符在Chrome中不会消失

回答

相关问题