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》

本文固定链接: https://jucelin.com/onpropertychange-oninput.html | Jucelin

该日志由 jucelin 于2012年08月08日发表在 前端设计, 实验室 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: onpropertychange功能的兼容 | Jucelin
关键字: , , , , ,

onpropertychange功能的兼容:目前有7 条留言

  1. 地板
    阿健:

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

    2015-04-30 10:51
  2. 板凳
    小虾米:

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

    2014-08-25 15:22
    • jucelin:

      JS赋值之后直接调用操作呢?

      2014-08-25 20:42
      • 小虾米:

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

        2014-08-29 12:26
  3. 沙发
    小艾博客:

    技术文!!!

    2012-08-10 19:12
    • jucelin:

      我只是转载,前辈们总结的。

      2012-08-13 13:46

发表评论

您必须 [ 登录 ] 才能发表留言!

更多