placeholder如何在兼容IE？

placeholder 属性在 IE9 及以下版本不被支持。要实现类似的功能，你需要使用 JavaScript polyfill 或其他变通方法。以下是一些常见的解决方案：

1. 使用 JavaScript polyfill:

这是最推荐的解决方案，因为它可以提供与现代浏览器一致的用户体验。你可以使用现成的 polyfill 库，例如：

• Placeholders.js: 这是一个轻量级的、专门用于 placeholder polyfill 的库。它会自动检测浏览器是否支持 placeholder，并在不支持的情况下使用 JavaScript 模拟。 你可以从 GitHub 或 CDN 引入它。

  <!--[if lt IE 10]>
  <script src="https://cdn.jsdelivr.net/npm/placeholders.js@1.0.0/dist/placeholders.min.js"></script>
  <![endif]-->
  

• Modernizr: 这是一个更全面的功能检测库，也包含了 placeholder 的 polyfill。如果你需要检测其他 HTML5/CSS3 特性，Modernizr 是一个不错的选择。

  if (!Modernizr.input.placeholder) {
      // 使用 JavaScript polyfill
      Placeholders.init(); // 或者其他 polyfill 方法
  }
  

2. 使用 jQuery 插件:

如果你已经在使用 jQuery，可以考虑使用 jQuery 插件来实现 placeholder 功能。网上有很多这样的插件可供选择。

3. 手动实现 JavaScript 解决方案:

你也可以自己编写 JavaScript 代码来实现 placeholder 功能。基本思路是：

• 当 input 获取焦点时，如果它的值等于 placeholder 文本，则清空值。
• 当 input 失去焦点时，如果它的值为空，则设置值为 placeholder 文本。

var inputs = document.querySelectorAll('input[placeholder]');

for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    var placeholder = input.getAttribute('placeholder');

    input.value = placeholder;
    input.style.color = '#aaa'; // 设置 placeholder 文本颜色

    input.addEventListener('focus', function() {
        if (this.value === this.getAttribute('placeholder')) {
            this.value = '';
            this.style.color = '#000'; // 恢复正常文本颜色
        }
    });

    input.addEventListener('blur', function() {
        if (this.value === '') {
            this.value = this.getAttribute('placeholder');
            this.style.color = '#aaa'; // 设置 placeholder 文本颜色
        }
    });
}

4. 使用 label 元素:

这是一种比较简单的解决方案，但用户体验不如 polyfill。你可以将 label 元素放置在 input 元素上方，并使用 CSS 样式来模拟 placeholder 的效果。

选择哪种方案？

使用 Placeholders.js 或类似的轻量级 polyfill 是最简单、最有效的解决方案。 如果你已经使用了 Modernizr 或 jQuery，可以考虑使用它们提供的相关功能。 手动实现 JavaScript 解决方案比较复杂，除非你有特殊需求，否则不推荐。 使用 label 元素的方案用户体验较差，只适合对兼容性要求非常低的场景。

记住，无论你选择哪种方案，都要在 IE9 及以下版本进行测试，以确保 placeholder 功能正常工作。