onpropertychange、oninput监听input输入框值实时变化

onpropertychange、oninput监听input输入框值实时变化

项目中要用到监听input框的输入值，差实时更新数据，开始用input的onchange 方法，但onchange方法必必须要在失去焦点的情况下才能触发，很明显无法满足我们的需求。

图1：

图２　

如图２所示，输入关键字，立即将结果显示在下方方框中，以实现实时查看。

onpropertychange：

IE下，onpropertychange　能用于即时捕获一个html元素的变化情况，而我们常用的onchange，则当 属性值改变时还必须并且当前元素失去焦点(onblur)时才可以激活该事件。但onpropertychange只能在IE下使用。

$("#you_input_id").on('input',function(){ //do something  });    
$("#you_input_id").each(function(){
                var _this = this;
                if(this.attachEvent){
                    this.attachEvent('onpropertychange',function(e){
                        if(e.propertyName!='value')return;
                        $(_this).trigger('input');
                    });
                }
            });

以上回调函数中会传入一个参数e，该事件有很多属性值，判断当前发生变化的属性名称是否为我们要找的propertyName, 如果propertyName==value，则表示是input 的value值发生变化，则此时调用 ‘input’事件。

oninput:

ie之外的大部分浏览器可以兼容oninput，基本用法如下：

<input type="text" name="youinput" oninput="alert(this.value);"/>

如果你使用的jquery库，则可以这样使用：

    $("#you_input_id").on('input',function(){
        //do something
   });

要兼容不同浏览器，只需将如下代码放入即可：

$("#you_input_id").on('input',function(){ //do something  });    
$("#you_input_id").each(function(){
                var _this = this;
                if(this.attachEvent){
                    this.attachEvent('onpropertychange',function(e){
                        if(e.propertyName!='value')return;
                        $(_this).trigger('input');
                    });
                }
            });