ie8中使用onpropertychange的一个问题

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2   < html xmlns ="http://www.w3.org/1999/xhtml" >
3   < head >
4 < title > Untitled Page </ title >
5 < script type ="text/javascript" >
6 function test()
7 {
8 txt.value = ' HelloWorld ' ;
9 }
10 function change(){
11 document.getElementById( ' show ' ).innerHTML = txt.value;
12 }
13 </ script >
14   </ head >
15   < body >
16   < span id ="show" ></ span >
17 < input name ="txt" type ="text" value ="123" onpropertychange ="change()" />
18 < button onclick ="test()" > 测试 </ button >
19 </ body >
20 </ html >

按道理来说修改input框里的内容应该会触发onpropertychange事件，但在ie8下会有问题：

按上面的操作当点击按钮后(见下图)：

删除d ，却没触发onpropertychange事件(见下图)

再删 l ，这时触发onpropertychange事件了(见下图)

在ie7下没有这个问题，有没有办法解决？

解决方案1：

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head > < title > Untitled Page </ title >
4 < script type ="text/javascript" src ="jquery-1.3.2.min.js" ></ script >
5 < script type ="text/javascript" >
6 $( function (){
7 $( ' #txt ' ).bind( ' propertychange ' ,change);
8 });
9 function test() {
10 $( ' #txt ' ).val( ' HelloWorld ' ).replaceWith( ' <input id="txt" type="text" value=" ' + $( ' #txt ' ).val() + ' " /> ' ); // 替换input
11 $( ' #txt ' ).bind( ' propertychange ' ,change);

13 }
14 function change(){
15 $( ' #show ' ).html($( ' #txt ' ).val());
16 }
17 </ script >
18 </ head >
19 < body >
20 < span id ="show" ></ span >
21 < input id ="txt" name ="txt" type ="text" value ="123" />
22 < button onclick ="test()" > 测试 </ button >
23 </ body >
24 </ html >

 说明：在实验的过程中，发现<input>被赋值后(即txt.value = 'HelloWorld')触发了一次onpropertychange事件,之后事件失效了，

        但这里仅失效一次，尝试在赋值后重新绑定事件，还是无效，所以干脆在赋值后，将input这个元素替换调，重新绑定事件就可以了。

转载于:https://www.cnblogs.com/nicholas_f/archive/2010/04/29/1724117.html