输入框内容实时监控改变input和propertychange
2017-10-13| 程成| 3000| 3| jQuery/JS

在web开发中,肯定需要用到实时监控输入框的内容。当你使用keydown,keyup,keypress时候,这样鼠标粘贴就不会起作用;组合键也会变得很麻烦。这时候就需要专业的html5标准事件:input,change,和IE专属的事件propertychange。


一、input和change事件


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




二、propertychange事件


功能同input一样,IE专属属性,为了兼容IE9以下浏览器。




三、output事件


image.png

IE不兼容,html5新标签。相当于input和propertychange两个加起来效果。


注:如果你用change事件,测试发现鼠标右侧粘贴事件发生在其之后。也就是说value始终获取的上次的value值。




四、使用案例


$(function(){ 
  $('.class').on('input propertychange', function() {  
  });  
})



这里class同时绑定了input和propertychange两个事件,完美解决输入框内容实时监控改变问题。




×
作者:程成
QQ:492245711