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

Question

我正在使用 Mathias Bynens 相当好的 jQuery 占位符插件 在 我的网站 在本身不支持它的浏览器中。我使用 自定义版本 调用该插件页面页脚中的 Modernizr 位于 Google Analytics 代码之后。我将它与一个脚本（在这个 Stack Overflow 答案中描述）结合起来，在 IE6 中显示 PNG。

标题中调用了 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 沙盒站点 来复制上述资源，以尝试找出导致问题的原因——但我也遇到了同样的问题。我尝试过其他占位符插件，结果相同。

---

编辑： 经过 Mathias Bynens 的有用回复，并测试了占位符 jQuery 插件是否在没有 Modernizr 的情况下工作，我得出的结论是这是一个 Modernizr 问题：如果系统加载占位符插件和 jQuery，而不使用 Modernizr，则占位符会显示在所有浏览器中 - 通过 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。