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

Question

我正在使用 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 的自定义版本切换到开发版本，但结果仍然相同。

Answer 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。