onpropertychange功能的兼容

IE的onpropertychange十分的好用,可惜的是只兼容IE,非IE就悲剧了。还好现在HTML5中的oninput已经兼容了这个功能。下面写了个测试页面,大家可以试试。

Demo:lab/onpropertychange/onpropertychange.html

看到这里,你需要知道onpropertychange的作用,还有onchange/onkeyup/onkeydown/onkeypress这几个属性的不同作用。

另外,前辈们已经写了个JS来完美支持这个特性,在Demo中也加入了进去,代码看下面


function immediately(){
	var element = document.getElementById("mytext");
	if("\v"=="v"){//判断IE
		element.onpropertychange = webChange;
	}else{//非IE
		element.addEventListener("input",webChange,false);
	}
	function webChange(){
		if(element.value){document.getElementById("test").innerHTML = element.value};
	}
}

使用建议

如果是只开发移动项目,只用oninput就OK了,如果是非移动项目,用onpropertychange+oninput基本就OK,我使用这2个方法测试了Chrome15、Opear12、IE6、IE7、IE8,均兼容,对于低版本的Chrome和Opear未测试。如果你的浏览器和我测试的不同,欢迎测试并反馈给我,万分感谢。

其他资源:

《js监听输入框值的即时变化》

《哥俩好:oninput & onpropertychange》

《A HTML5 Browser maze, oninput support》

7 thoughts on “onpropertychange功能的兼容

  1. 阿健

    现在ie11好像已经废弃onpropertychange这个。也是采用的addEventListener了。

    回复
  2. 小虾米

    键盘或鼠标操作才呢个监听到,如果是js赋值到input则无效,请教如何解决?

    回复
      1. 小虾米

        回到原点了。本来是监听属性或值的变化,就是要监听到js赋值。比如上传图片,获得图片url。在不能修改上传程序的情况下如何操作。如果能在“JS赋值之后直接调用操作”那么就没有必要调用了。感谢您的回复。

        回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注