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未测试。如果你的浏览器和我测试的不同,欢迎测试并反馈给我,万分感谢。
其他资源: