HTML占位符浏览器兼容性

Posted 2023-02-21

技术标签:

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

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

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

【问题讨论】：

公平的问题！我的猜测是 IE 根本不支持它，它是一个 HTML 5 属性。不过我也懒得研究了。 :) 【参考方案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 基本上说：