即时反应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)
例子:
"inputchange1" type="text"/>