javascript - Mootools を使用して IE 8-9 で 'placeholder' 属性をサポートするにはどうすればよいですか?

Question

他の人がこれを尋ねましたが、答えはすべて jQuery に関するものです。

Answer 1

まず、基本的にこの機能をシミュレートする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') });
    });
});

Answer 2

/**
 * 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;
      }
    }
  });
}