监听输入框值变化的新方法

传统监听输入框的做法就是使用keyupkeydownkeypress,或者change事件来实现,但keyupkeydownkeypress事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键『剪贴』和『粘贴』这些操作。而change事件必须是焦点离开输入框后才触发,并不能实时监听。所以这两个事件来监听输入框值变化并不完美。

HTML5带来了一个新方法:input。它可以实时监听textarea、text、password和search的内容变化,而不用等到输入栏失去焦点就能触发,正是我们想要的。input的浏览器最低版本支持如下:

名称 Chrome Firefox (Gecko) Internet Explorer Opera Safari
版本 (Yes) 2 9 10 (Yes)

对于版本在9以下的IE浏览器可以使用IE传有的onpropertychange事件,onpropertychange事件可以监听元素的标准属性值变化,当然也包括value属性的变化。但是一个元素的属性变化时,也会触发这个事件,比如name属性变化,也会触发这个事件。这个结果不是我们想要的,但可以使用event.propertyName值来判断是否是元素的值发生变化。

IE9开始IE才支持使用addEventListener来绑定事件,所以可以用这个来判断到底是用input还是onpropertychange,代码如下:

/*
 * http://julabs.com
 */
if(document.addEventListener){
	// 支持input
	document.getElementById('myInput').addEventListener('input', function(){});
}else if(document.attachEvent){
	// 支持onpropertychange
	document.getElementById('myInput').attachEvent('onpropertychange', function(e){
	// 判断是不是元素的value值发生了变化
		if (e.propertyName.toLowerCase() == 'value'){

		}  
	});
}

演示代码如下:


input事件只有在用户输入的情况下才触发,如果用JS改变控件的值,是不会触发这个事件的,而onpropertychange则会触发,这个比较好。

需要注意的是,在IE9中,inputonpropertychange两个事件都有个小bug,那就是当使用鼠标右键执行『剪切』和『删除』时,这两个事件都不会触发,但IE其它版本都是正常可用的。

参考文章:

此条目发表在 前端 分类目录,贴了 , , 标签。将固定链接加入收藏夹。