占位符在所有浏览器中都不能正常工作[重复]答案

【问题标题】：Placeholder is not working properly in all browsers [duplicate]占位符在所有浏览器中都不能正常工作[重复]
【发布时间】：2014-04-07 18:25:47
【问题描述】：

可能重复：
How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

我创建了一个登录弹出框，并使用占位符来显示输入字段名称，但在其他浏览器中，例如 IE9、IE8 甚至 IE10 都没有在输入中显示占位符文本。

我该如何解决这个问题？有没有其他方法可以填写输入框？

<input name="username" type="text" value="" placeholder="Username" />

【问题讨论】：

stackoverflow.com/q/3429520/1367163

标签： html css

【解决方案1】：

正如 OEZI 所说，并非所有浏览器都支持它。

试试这个

<input name="username" type="text" value="" onfocus="if (this.value == 'Username') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Username';}" />

【讨论】：

默认值和占位符不等效。
正如昆汀所说，这会将“占位符”文本作为表单提交的值发送，这不是 html5-placeholder 所做的，因此它可能不起作用或需要对提交进行额外检查（如果它是例如必填字段 - 使用此代码，显示“占位符”时输入不为空）
是的，我知道，但这没什么大不了的。你可以轻松处理它。

【解决方案2】：

placeholder 是新的 HTML5 功能的一部分，直到现在所有浏览器都没有完全支持。更多信息，请查看：

http://caniuse.com/#search=placeholder（更多 html5/css3 功能：http://caniuse.com/）
http://wufoo.com/html5/attributes/01-placeholder.html（更多 html5 功能：http://wufoo.com/html5/）

编辑：
如果您使用的是 jQuery，则有 this little plugin 添加对所有浏览器的支持，直到 IE6。

【讨论】：

【解决方案3】：

到目前为止，IE8 不支持占位符。你可以使用

<input type="text" name="username" onfocus="if(this.value=='Username') this.value='';" onblur="if(this.value=='') this.value='Username';" />

【讨论】：

默认值和占位符不等效。
正如昆汀所说，这会将“占位符”文本作为表单提交的值发送，这不是 html5-placeholder 所做的，因此它可能不起作用或需要对提交进行额外检查（如果它是例如必填字段 - 使用此代码，显示“占位符”时输入不为空）