![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
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:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
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这个元素替换调,重新绑定事件就可以了。