大家都知道输入框值改变事件可以用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) { // IEpastedText = 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'
});