输入框的onpropertychange事件IE低版本不冒泡问题

大家都知道输入框值改变事件可以用oninput和onpropertychange触发。

今天项目中有需求要给输入框加“放大镜”效果，如图：

结果发现onpropertychange事件在IE9及更低版本浏览器下不冒泡！

于是改用onkeyup处理，既然IE9及更低版本浏览器下onpropertychange不冒泡（因为有时候dom就是后加进来的，你得保证事件代理时功能别失效了），所以输入框粘贴的时候还得加上onpaste事件。

是的，可以考虑dom处理完后在给输入框绑定onpropertychange事件，当输入框从dom上移除后再给它解绑事件，但是那样也太周折了。

然后新问题来了，onpaste事件捕获粘贴的内容是在该事件触发一瞬间，那时候粘贴的内容还没在输入框里面，不能在输入框得到粘贴的内容，并且捕获粘贴内容还存在兼容性问题需要处理。

总结一下一上内容就是：onpropertychange事件支持IE浏览器但在IE9及以下不冒泡；oninput事件支持其他浏览器；onkeyup都支持，但要再单独处理粘贴事件onpaste。

以下是前图“输入框放大镜”的源码，欢迎拍砖：

;(function($){
    function MGTargit(ops){
        this.tmpl = $('<div class="MGlassCom" style="width: 300px;height: 40px;line-height: 40px;padding: 0 5px;border: 1px solid #ddd; font-size: 18px;font-weight: bold; position: absolute;top: -45px;background: #97d3d9;color: #666;display: none;"></div>');
        this.el = $(ops.el);
        this.config = $.extend({
            formatConfig:[3,4,4],
            delimiter:' '
        },ops.config);
    }
    MGTargit.prototype = {
        format : function(str){
            var count = 0,
                output = [],
                formatConfig = this.config.formatConfig,
                delimiter = this.config.delimiter;
            for(var i= 0,ilen = formatConfig.length;i<ilen;i++){
                var s = str.substr(count,formatConfig[i]);
                if(s.length > 0){
                    output.push(s);
                }
                count += formatConfig[i];
            }
            return output.join(delimiter);
        },
        init : function(){
            $(this.el).css('position','relative').append(this.tmpl);
            this.mgCon = $(this.el).find('.MGlassCom');
            this.bindFunc();
        },
        setCss : function(ops){
            this.mgCon.css(ops);
        },
        bindFunc : function(){
            var _self = this;
            $(_self.el).delegate('input','keyup paste',function(e){
                var pastedText = "";
                if(e.type == "paste"){
                    if (window.clipboardData && window.clipboardData.getData) { // IE
                        pastedText = window.clipboardData.getData('Text');
                    } else {
                        pastedText = e.originalEvent.clipboardData.getData('Text');//e.clipboardData.getData('text/plain');
                    }
                }
                var iptVal = $(this).val(),
                    mgVal = iptVal + pastedText;
                if(mgVal.length > 0){
                    _self.mgCon.show().html(_self.format(mgVal));
                }else{
                    _self.mgCon.hide();
                }
            });
            $(_self.el).delegate('input','blur',function(e){
                _self.mgCon.hide();
            });
        }
    };
    $.fn.extend({
        mglass : function(cfg){
            var mgls = new MGTargit({
                el:this,
                config : cfg || {}
            });
            mgls.init();
            return {
                setStyle : function(ops){
                    mgls.setCss(ops)
                }
            };
        }
    });
})(jQuery);

用法：

//$('.MGlass').mglass({'formatConfig':[6,8,4]}).setStyle({
$('.MGlass').mglass().setStyle({
    'background' : '#ff9',
    'font-size' : '24px'
});