placeholder兼容ie8,9

    寫了一登陸頁，其中有動態驗證碼這一簡單的功能。在大部分瀏覽器沒問題。可是在i8如下，忽然報錯了，jquery中addeventlistener有問題。原來是jquery的版本有點高了，改成<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>這個版本才把這個解決了。

    而後再測試ie8,9的時候，發現input裏邊的placeholder不起做用了。而後在網上簡單查了一下，發現有人封裝過placeholder.js的一個小功能，引進去就好啦。下邊把代碼貼出來：

   

(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 = '#666';
                    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);
        });
    }
})();

/**
 * 源碼名稱：placeholder.js
 * 實現功能：讓低版本的瀏覽器(主要是IE8)支持placeholder
 * 做者主頁：http://www.miaoqiyuan.cn/
 * 聯繫郵箱：mqycn@126.com
 * 使用說明：http://www.miaoqiyuan.cn/p/placeholder-js
 * 最新版本：http://git.oschina.net/mqycn/placeholder.js
 */