即时搜索/反应的input和propertychange方法

在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两个方法。

示例:

HTML

<input type="text" name="claimNum" value="10" id="input-num" onpropertychange="OnPropChanged()">

JQ

$('input').bind('input propertychange', function() {
        var num = $(this).val();
        //alert(num);
        if (num==0) {
            $('.sp1').html('￥'+saleMoney);
            $("#input-num").val('1')
        }else{
            if (num<=50&&num>0) {
            //    var jiage = num*saleMoney;
            //    $('.sp1').html('￥'+jiage.toFixed(2));
            }else{
                alert('您购买的数量不能大于50棵');
                $("#input-num").val('50')
            }
            var jiage = $("#input-num").val()*saleMoney;
            $('.sp1').html('￥'+jiage.toFixed(2));
        }
    });