一、问题
对于输入框实时监听，常用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>
三、代码瑕疵
IE9浏览器的判断不准确，网上找了很多种方法都是IE9和IE10不能完美区分，但是这样也不影响，大不了IE10和IE9走一样的程序就好了。不过，各位大神如果有更好的方式，还望推荐。
时间： 2024-10-15 18:14:21