input和propertychange方法动态监听输入框值（2种方式）

在web开发中，我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了，同时，在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。

1.oninput&onchange：

oninput和onchange都是事件对象，当输入框的值发生改变时触发该事件。不同的是，oninput是在值改变时立即触发，而onchange是在值改变后失去焦点才触发，并且可以用在非输入框中，如：select等。

 

2.propertychange：

功能同oninput，用以替代oninput在IE9以下的不兼容性。

 

3.output:

output是一个HTML5标签,IE系列浏览不兼容，主要用于计算输出。如：

propertychange 和 input 事件:

1）propertychange只要当前对象的属性发生改变就会触发该事件

2）input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

$(function(){ 

    $('#username').bind('input propertychange', function() {  

    $('#result').html($(this).val().length + ' characters');  

  });  

})  

这里bind同时绑定了input和propertychange两个方法。

即时反应的input和propertychange方法     https://www.cnblogs.com/LHYwin/p/6136256.html

在做一个查询搜索，需要根据input值改变而触发事件，需要用到propertychange 和oninput，但是propertychange引用好多博客都是错误的；正确方法如下：

$('#addressSearch').bind('input propertychange', function() { 
        var adType=document.getElementById("adType").value;       //获取通讯录的类型
        addressTypeOnClick(adType);
    });

input属性加个id为addressSearch，网上还说这个属性ie浏览器专用，试了谷歌浏览器也是可以用的

<input class="cot_input" id="addressSearch"  type="text" placeholder="搜索姓名" value="" style="border: 1px solid #f4f0f0;" />

propertychange 的使用方法     https://blog.csdn.net/u012157999/article/details/53612410

 第一个案例;

<div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" id="input_search" placeholder="商品/超市" maxlength="20">
            </div>

$('#input_search').bind('input propertychange', function() {
        $(".search-original").hide();
        $(".search-auto").show();
        pp_value = $(this).val();
        search_auto();
    });
function search_auto(){
        $.ajax({
            type: "post",
            url:_APIURL_,
            dataType: "json",
            data: {
                "method": 'Search.searchRecommend',
                "type": pp_type,
                'keyword':pp_value,
                'store_id':store_id
            },
            success: function (reg) {
                if(reg.code == 1){
                    var arr = reg.data;
                    var auto_html = '';
                    if(arr != ''){
                        $(".search-auto .no-goods").hide();
                        $("#search_auto").show();
                        var type3 = '';
                        $.each(arr,function(i){
                            var str = arr[i].title;
                            var reg = new RegExp("(" + pp_value + ")","g");
                            var str = arr[i].title;
                            if(!(typeof(str)=='undefined')){
                                var newstr = str.replace(reg,"<em>$1</em>");
                                if( Number(is_store_id) > 0 ){
                                    auto_html += '<a href="<{:U('Mobile/Search/SearchResult')}>/content/'+arr[i].title+'/type/goods/store_id/'+store_id+'" class="search-auto-record"><p class="word"><span>'+newstr+'</span></p><i></i></a>';
                                }else{
                                    pp_type == 1 ? type3 = 'goods':type3= 'point';
                                    auto_html += '<a href="<{:U('Mobile/Search/SearchResult')}>/type/'+type3+'/content/'+arr[i].title+'" class="search-auto-record"><p class="word"><span>'+newstr+'</span></p><i></i></a>';
                                }
                            }
                        });
                        $("#search_auto").html(auto_html);
                        mui('.search-auto').on('tap','a',function(){document.location.href=this.href;});
                    } else{
                        $("#search_auto").hide();
                        $(".search-auto .no-goods").show();
                    }
                }
            },
            error:function(){
                mui.toast("网络连接失败,请刷新重试！");
            }
        });
    }

本地效果为：wx7z_mall\trunk\Application\Mobile\View\Search\index.html

 第二种方式为：

 

例子如：

html代码为：

<input type="text" id="fine" placeholder="请输入所属单位">

js代码为：

$('#fine').on('input propertychange',function(){
        $('.showUserPicker').html('');
        $("#xuejie").css('display','block');
        $('#fine').removeAttr('data-id');
        $('#fine').removeAttr('data-value');
        $('.showUserPicker').css('display','none');
        $('.identify-jump').css('display','none'); 
        var vals=$(this).val();
        var arrs=[];
        var lenLi=$('#xuejie').find('li').length;
        for(var i=0; i < lenLi; i++){
            var hm=$('#xuejie').find('li').eq(i).html();
            if(hm.indexOf(vals) < 0){
                $('#xuejie').find('li').eq(i).addClass('hide');
                arrs.push(true);
            }else{
                $('#xuejie').find('li').eq(i).removeClass('hide');
            }
        }
        if(arrs.length == lenLi){
            $('#xuejie').find('p').removeClass('hide');
        }else{
            $('#xuejie').find('p').addClass('hide');
        }
    });

本地效果为：http://svn.chenhua.cc/app/plug/propertychange/index.html

线上效果为：wx7z_mall\trunk\Application\Mobile\View\User\person2company.html