即時搜索/反應的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));
        }
    });