码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-01-23 21:09:10      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

一、问题  

  对于输入框实时监听,常用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>
View Code

三、代码瑕疵

  IE9浏览器的判断不准确,网上找了很多种方法都是IE9和IE10不能完美区分,但是这样也不影响,大不了IE10和IE9走一样的程序就好了。不过,各位大神如果有更好的方式,还望推荐。

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

标签:

原文地址:http://www.cnblogs.com/bjchenxn/p/5153714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!