让IE8和IE9支持 placeholder,原创

最近的项目使用了 主要针对移动端客户,大胆 的使用了 html5 ,到发布的时候,领导有让支持ie8,瞬间头炸掉了。不过有 html5shiv.min.js、respond.min.js,IE8下勉强也可以使用了。

剩下的问题,就是 placeholder 的问题了(这次设计的比较激进,直接取消掉了 input 的输入说明,用placeholder代替)。百度搜索一番,还没有好的改造方法(需要设计程序改动)。

抽了一下午的时间,编写了 placeholder.js,实际实现起来不是很难。

为了便于移植,没有依赖任何框架(比如Jquery),可以直接 Git@OSC去拿。

在IE8中的显示效果:

在IE9中的显示效果:

让低版本的浏览器(主要是IE8)支持placeholder,直接引用本脚本即可,原页面无需做任何改动,系统全自动分析并处理:

已经发布到:http://git.oschina.net/mqycn/placeholder.js

/**
 * 源码名称: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
 */

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注