解決ie瀏覽器低版本不支持placeholder屬性的問題

在我們的日常開發中，時常會遇到要求兼容ie低版本的項目，其中表單多的項目，placeholder幾乎是必不可少的，本文借鑑了網上的其他方法，主要爲解決ie瀏覽器低版本不支持placeholder屬性的問題，記錄一下學習的路程，也分享給大家共同學習，話不多說，直接上代碼

  // 解決ie8、ie9不支持placeholder問題
  (function() {
    //僅在不支持 placeholder 的時候執行
    if (!('placeholder' in document.createElement('input'))) {
      var listenerName = 'attachEvent';
      var listenerPrefix = 'on';
      if ('addEventListener' in window) {
        listenerName = 'addEventListener';
        listenerPrefix = '';
      }
      window[listenerName](listenerPrefix + 'load', function() {
        var placeholderListener = {
          //添加輸入項
          add: function(tagName) {
            var list = document.getElementsByTagName(tagName);
            for (var i = 0; i < list.length; i++) {
              this.render(list[i]);
            }
            return this;
          },
          //渲染
          render: function(dom) {
            var text = dom.getAttribute('placeholder');
            if (!!text) {
              this.attachEvent(dom, this.getDiv(dom, text));
            }
          },
          //設置樣式
          getDiv: function(dom, text) {
            var div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.width = this.getPosition(dom, 'Width') + 'px';
            div.style.height = this.getPosition(dom, 'Height') + 'px';
            div.style.left = this.getPosition(dom, 'Left') + 'px';
            div.style.top = this.getPosition(dom, 'Top') + 'px';
            div.style.color = '#848484';
            div.style.textIndent = '5px';
            div.style.zIndex = 999;
            div.style.background = dom.style.background;
            div.style.border = dom.style.border;
            div.style.cursor = 'text';
            div.innerHTML = text;
            if ('TEXTAREA' == dom.tagName.toUpperCase()) {
              div.style.lineHeight = '35px';
            } else {
              div.style.lineHeight = div.style.height;
            }
            document.getElementsByTagName('body')[0].appendChild(div);
            return div;
          },
          //計算當前輸入項目的位置
          getPosition: function(dom, name, parentDepth) {
            var offsetName = 'offset' + name;
            var offsetVal = dom[offsetName];
            var parentDepth = parentDepth || 0;
            if (!offsetVal && parentDepth < 3) {
              offsetVal = this.getPosition(dom.parentNode, name, ++parentDepth);
            }
            return offsetVal;
          },
          //添加事件
          attachEvent: function(dom, div) {
            //激活時，隱藏 placeholder
            dom[listenerName](listenerPrefix + 'focus', function() {
              div.style.display = 'none';
            });
            //失去焦點時，隱藏 placeholder
            dom[listenerName](listenerPrefix + 'blur', function(e) {
              if (e.srcElement.value == '') {
                div.style.display = '';
              }
            });
            //placeholder 點擊時，對應的輸入框激活
            div[listenerName](listenerPrefix + 'click', function(e) {
              e.srcElement.style.display = 'none';
              dom.focus();
            });
          },
        };
        //防止在 respond.min.js和html5shiv.min.js之前執行
        setTimeout(function() {
          placeholderListener.add('input').add('textarea');
        }, 50);
      });
    }
  })();

原理不復雜，可直接粘貼使用，值得注意的一點是，由於是模擬的假的輸入框，所以在切換顯示隱藏的時候需要去手動控制一下~

感謝網上各位大佬的帖子給予的啓發~