Modernizr.load 在 IE7/IE8 中不提供输入和文本区域占位符支持

Posted 2023-03-05

【中文标题】Modernizr.load 在 IE7/IE8 中不提供输入和文本区域占位符支持

【英文标题】：Modernizr.load not providing input and textarea placeholder support in IE7/IE8

【发布时间】：2012-03-10 20:03:37

【问题描述】：

我正在使用 Mathias Bynens 相当不错的 jQuery placeholder plugin 在本身不支持它的浏览器中显示 my site 中的占位符。我在页面页脚中使用 Modernizr 的custom version 调用插件，紧跟在 Google Analytics 代码之后。我将它与一个脚本（在this Stack Overflow answer 中描述）相结合，以在 IE6 中显示 PNG。

header中调用了Modernizr，站点也使用Typekit。仅当占位符功能缺失时才调用 jQuery，否则实际上不需要它。

相关代码（我在 WordPress 博客的页脚中调用）如下所示：

1。修复 PNG：

s.parentNode.insertBefore(g, s) (document, 'script')); function fixPngs() for (i = 0; i 0) fixPng(a, document.images[i]) function fixPng(a, b) b.src = "http://cdn.donaldjenkins.com/media/themes/belgravia/2/spacer.gif"; b.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" a "', sizingMethod='scale')" ;

2。添加占位符：

Modernizr.load( test: Modernizr.input.placeholder, nope: ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/placeholder.js"], complete: function () $('input, textarea').placeholder(); );

3。调用 PNG 脚本

fixPngs();

不幸的是，占位符在 IE6 和 IE9 中显示，但在 IE7 或 IE8 中不。我尝试设置一个复制上述资源的 html sandbox site，以尝试查明导致问题的原因，但我遇到了同样的问题。我尝试了其他占位符插件，结果相同。

---

编辑： 在 Mathias Bynens 的有用回复之后，并在测试占位符 jQuery 插件是否在没有 Modernizr 的情况下工作后，我得出结论这是一个 Modernizr 问题：如果在不使用 Modernizr 的情况下系统地加载了占位符插件和 jQuery，则占位符显示在所有浏览器中——当通过 Modernizr 加载时，它们在 IE6 和 9 中显示，但在 IE 7 和 8 中不显示。

我尝试从 Modernizr 的自定义版本切换到开发版本，但结果仍然相同。

【参考方案1】：

http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js 对我来说是 404 错误。我猜这就是问题所在？ :)

$ curl -sI http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js | head -n 1
HTTP/1.1 404 Not Found

这可能与您的问题无关，但您不应该简单地使用Modernizr.input.placeholder 检查您是否需要textarea@placeholder 支持。原因是有些浏览器支持input@placeholder，但不支持textarea@placeholder。 Modernizr.input.placeholder 仅代表input 支持。

无论如何，插件都会在内部执行此检查，但如果您想使用 Modernizr，请这样做：

Modernizr.load(
  'test': Modernizr.input.placeholder && Modernizr.textarea.placeholder,
  'nope': ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://cdn.donaldjenkins.com/wp-content/themes/belgravia/js/jquery.placeholder.min.js"],
  'complete': function() 
    $('input, textarea').placeholder();
  
);

也就是说，如果您不需要 textarea@placeholder 支持，您可以删除检查，并从选择器中删除 textarea。

【讨论】：

哇，这很快——谢谢。不知道为什么你在脚本上得到一个 404 - 为我正常加载......我实际上在大多数页面上需要 input 支持，在联系页面上需要 textarea 支持（它在 WordPress 之外并且实际上在textarea IE 6 和 IE9 中的框...)

无法弄清楚为什么你们都在脚本上得到 404。诡异的。无论如何，我使用 Modernizr 的原因是为了不加载 jQuery + Mathias 的插件，除非需要——它们只有在功能缺失的情况下才会加载。我已经更正了代码以包含 Mathias 的建议，但在 IE7 和 8 中仍然没有运气。

在检查了我的 CDN 之后，似乎他们 _do_ 遇到了 jsfiles 的问题，其中包含句号……我已将文件重命名为 cdn.donaldjenkins.com/wp-content/themes/belgravia/js/… — 但仍然得到相同的结果：占位符在 IE6 和 9 中，但在 IE7 和 8 中没有……不知道下一步该往哪里看。

@DonaldJenkins 我确实在dbdj.org 上看到了IE7 中的占位符。这里似乎一切正常。

我实际上已将其范围缩小到 Modernizr。如果您在不执行 Modernizr 测试的情况下系统地加载 jQuery 和插件，则占位符会显示在所有版本的 IE 中。如果您使用Modernizr.load，它们只会出现在 IE6 和 IE9 中。其他占位符插件也会发生同样的情况，这很可能是 Modernizr 的问题。