如何使用 Mootools 支持 IE 8-9 中的“占位符”属性？

Question

其他人也问过这个，但答案都是jQuery的。

Answer 1

/**
 * IE doesn't support the placeholder attribute, but we can set the value attribute.
 */
if (Browser.Engines.trident()) {
  var elements = $$('input[placeholder]');
  elements.map(function(it) {
    if (!it.getAttribute('value')) {
      it.setAttribute('value', it.getAttribute('placeholder'));
      it.onfocus = function() {
        it.setAttribute('value', '');
        it.onfocus = null;
      }
    }
  });
}

Answer 2

首先，您应该使用 Mootools 插件“OverText”http://mootools.net/docs/more/Forms/OverText，它基本上模拟了此功能。它实际上可以在任何浏览器中工作，因此，如果您愿意，您可以使用它并完全忘记占位符属性。但是，如果您想在可用时支持占位符但在旧版浏览器中使用 OverText，您可以这样做：

window.addEvent('domready', function() {
    // create a test element
    var test = new Element('input'); 
    // if it has 'placeholder' this browser supports it already so you can exit
    if(("placeholder" in test)) { return; } 
    // for older browsers, get all the inputs which you have assigned a 'placeholder' attribute to
    $$('input[placeholder]').each(function(el) { 
        // and create an overtext for them using the value of the placeholder attribute
        new OverText(el, { textOverride: el.get('placeholder') });
    });
});