即时反应input和propertychange方法

动态监听输入框的变化，使用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两个方法。(借鉴http://www.cnblogs.com/LHYwin/p/6136256.html)

 

例子：

<div>
<input id="inputchange1" type="text"/><label></label>
</div>
<script>
$('#inputchange1').bind('input propertychange', function() { //事件监听input&propertychange
$("label").html($("#inputchange1").val().length+"/30");
});
</script>