IE9浏览器onpropertychange和oninput事件对delete键和剪切不触发问题解决方法

最新推荐文章于 2023-02-01 13:27:47 发布

weixin_33834910

最新推荐文章于 2023-02-01 13:27:47 发布

阅读量341

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bjchenxn/p/5153714.html

版权

一、问题　　

　　对于输入框实时监听，常用oninput事件，低版本的IE浏览器使用onpropertychange事件。但是还有一点瑕疵就是IE9对于输入框的剪切和delete键的操作没有任何反应，这是一件非常悲伤的事情。

二、方法

　　亮点：keyUp监听delete和剪切，手动触发事件

　　代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>IE9删除键不能用兼容写法</title>
 6 </head>
 7 <body>
 8     <input type="text" id="ipt"/>
 9     <div id="test"></div>
10 <script type="text/javascript">
11     var oIpt = document.getElementById('ipt'),
12         oTest = document.getElementById('test');
13 
14     function inputEvent(){
15         oTest.innerHTML  += ', input';
16     }
17 
18     function propertychangeEvent(e){
19         if(e.propertyName === 'value'){
20             oTest.innerHTML += oTest.innerHTML + ', propertychange';
21         }
22     }
23 
24     function isIE678(){
25         return ('a~b'.split(/(~)/))[1] == "b";
26     }    
27 
28     if(isIE678()){ //IE8
29         oIpt.attachEvent('onpropertychange', propertychangeEvent);
30     }else{
31         if(window.attachEvent){   //IE
32             oIpt.attachEvent('oninput', inputEvent);
33             if(!window.ScriptEngineMinorVersion() && window.addEventListener){  //IE9
34                 alert('IE9'); //只有IE9页面初始化的时候有这个弹框
35                 oIpt.attachEvent('onkeyup', function(e){
36                     if(e.keyCode === 8){
37                         //删除--触发
38                         oIpt.fireEvent('oninput'); 
39                     }
40                     if(e.ctrlKey && e.keyCode === 88){
41                         //剪切--触发
42                         oIpt.fireEvent('oninput');
43                     }
44                 });
45             }
46         }else{ //非IE
47             oIpt.addEventListener('input', inputEvent);
48         }
49     }
50 </script>
51 </body>
52 </html>