HTML占位符浏览器兼容性答案

【问题标题】：HTML Placeholder browser compatibilityHTML占位符浏览器兼容性
【发布时间】：2011-04-29 13:54:12
【问题描述】：

哪些浏览器支持文本输入的占位符 html 标记？ Internet Explorer 是否支持它？（我有一个 JavaScript 占位符，可用于不支持它的浏览器。）

<input type=TEXT placeholder="placeholder here" />

【问题讨论】：

公平的问题！我的猜测是 IE 根本不支持它，它是一个 HTML 5 属性。不过我也懒得研究了。 :)

标签： html dom browser placeholder

【解决方案1】：

我知道这是一个老问题。我的建议是使用 Modernizr 来检测占位符支持！ https://modernizr.com/

【讨论】：

【解决方案2】：

目前所有主流浏览器都支持，除了 IE 9 及更早版本和 Opera mini。

有关更新，请查看w3schools-specs 或者更好的是，查看此overview。

【讨论】：

从 3.7 版开始，Firefox 也支持这一点。 Opera 11 版和 Iphone 4.0 版。让你知道。
检查w3schools.com/tags/att_input_placeholder.asp对HTML占位符的支持
IE 10 支持它，我可以在 IE 10 中看到占位符文本 :) 来自 IE 的好消息！难以置信：D
请不要使用 w3schools。对于当前的浏览器支持，caniuse 是一个很好的资源：@987654324@
w3school 不再是一个很好的信息来源（有人说它曾经是），请参阅www.w3fools.com

【解决方案3】：

占位符完全支持：

FF 4+
铬 4+
Safari 5+
Opera 11.6+
IE 10+

来源：Can I use input placeholder attribute?

【讨论】：

【解决方案4】：

对于那些想要最简单解决方案的人，请使用内置功能！

<input type="text" name="email" value="Email Address" placeholder="Email Address" onfocus="if(this.value==this.placeholder) this.value=''" onblur="if(this.value=='') this.value=this.placeholder">

在 chrome 和 IE8 中测试:)

注意：我将它与更多的 javascript 一起使用，通过在运行时更改值和占位符来验证输入并在字段本身内提供反馈。

【讨论】：

【解决方案5】：

根据this，IE 10 支持。（可以test it here）

我用这个——可能是最简单的方式——解决问题：

<!--[if lt IE 10]>email:<![endif]-->
<input placeholder='email' type='text' name='email'>

【讨论】：

IE 10 支持它。刚刚测试。
我喜欢这个解决方案——不用担心 JS。
这里绝对是最简单的解决方案

【解决方案6】：

对于任何感兴趣的人，这是我使用的 jQuery Fallback
我将它与 jQuery 验证引擎一起使用。
将 FORMCLASS 替换为表单的类。

<!-- IF IE - use Placeholder Fallback -->
<!--[if lt IE 10 ]>
<script>
  $(".FORMCLASS").find('[placeholder]').each(function(){ 
    $(this).val($(this).attr('placeholder'));
    $(this).focus(function() {
      if ($(this).attr('placeholder')==$(this).val()) {
        $(this).val('');
      }
    });
  });
</script>
<![endif]-->

【讨论】：

目前最好的解决方案。谢谢！
替代 HTML 中的 [if lt IE 10] 类似 jQuery.support.placeholder = (function(){ var i = document.createElement('input'); return 'placeholder' in i ; })();可以使用。取自link
如果用户以某种方式跳过焦点会出现问题，例如只需点击“提交”，然后占位符作为字段值传递。
请注意，这不会显示密码字段的占位符文本。
这是在html5中引入的。对于较旧的浏览器，您可以使用 javascript 来伪造它，方法是在单击文本时预填充和删除与提示文本匹配的文本，如果您清空该框，则将提示文本放回原处。

【解决方案7】：

IE 不支持占位符

我觉得这段代码更好，它适用于所有主流浏览器

<input id="example-email" type="text" value="Email Address" onfocus="if(this.value === 'Email Address') this.value = '';" onblur="if(this.value === '') this.value = 'Email Address';" name="example-email">

【讨论】：

我不认为你的代码更好。那是老办法。我知道它有效。但实际上，对于大多数浏览器来说，我们并不需要这个 javascript。所以我们应该使用占位符属性。如果我们不能或不想忘记 IE，那么我们必须只为 IE 提供明确的解决方案。

【解决方案8】：

问题可能几年前就已经回答了，但我今天在搜索时发现了它。

由于之前没有提供好的参考资料和图片，我正在更新这个问题。

HTML5 placeholder Attribute 基本上说：

所有主流浏览器都支持占位符属性，除了 Internet Explorer。

仅供参考：这包括 IE9。

【讨论】：

可能是w3schools，确实有一些不正确的信息。也就是说，在这种情况下，它正是我想要的，所以赞成！

【解决方案9】：

如果有人正在为不受支持的浏览器寻找类似 HTML5 占位符的解决方案，这里有一篇很好的文章：

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/

【讨论】：

【解决方案10】：

Firefox 从 4.0 开始也支持它

【讨论】：