当输入字段处于焦点时，占位符不会消失答案

【问题标题】：Placeholder doesn't disappear when input field in focus当输入字段处于焦点时，占位符不会消失
【发布时间】：2014-04-21 07:07:03
【问题描述】：

当用户选择字段时，表单上每个输入字段的占位符值应该消失，但事实并非如此。文档类型为 HTML5。

http://dailyspiro.com/index.html

<input required type="text" name="user-first-name" id="user-first-name" placeholder="First Name" class="text ui-widget-content ui-corner-all decorative-icon icon-user" />

【问题讨论】：

您使用的是什么浏览器/操作系统？在带有 Safari 7.0.2 的 OSX 10.9.2 上没有问题。
这里也没有问题
另外，在你输入之前它不应该“消失”-
sridharkatakam.com/… 正常行为是在您开始输入时文本消失，而不是单击。任何数量的 JS/CSS 技巧都可以增加焦点消失的能力。
只要value 为空，placeholder 就会显示，而不仅仅是焦点。在该字段中输入一些内容，它应该会隐藏。

标签： html css

【解决方案1】：

您可以在 HTML 输入标签中直接使用 onfocus 和 onblur 事件

&lt;input onfocus="this.placeholder = ''" onblur="this.placeholder = 'click me'" placeholder="click me"/&gt;

更多信息和例子click here

【讨论】：

【解决方案2】：

你可以用一点 js 来实现同样的事情。不确定您是在寻找还是纯 HTML。 @chiliNUT 的选项应该适合您。无论如何，因为我不完全清楚你想要什么......

这里有 2 个选项：

<input required type="text" name="user-first-name" id="user-first-name" class="your list of class names" placeholder="First Name" onfocus="if(this.value == 'First Name') { this.value = ''; }" value="First Name"/>

<input required type="text" name="user-first-name" id="user-first-name" class="your list of class names" onfocus="if(this.value == 'First Name') { this.value = ''; }" value="First Name"/>

还有obligatory fiddle。

【讨论】：

【解决方案3】：

CSS

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */

看这里http://sridharkatakam.com/make-search-form-input-box-text-go-away-focus-genesis/

【讨论】：

啊。对不起！有点从那篇文章中欺骗了你的答案。还是不错的阅读！