IE9浏览器onpropertychange和oninput事件对delete键和剪切不触发问题解决方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE9浏览器onpropertychange和oninput事件对delete键和剪切不触发问题解决方法相关的知识，希望对你有一定的参考价值。
一、问题
对于输入框实时监听，常用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走一样的程序就好了。不过，各位大神如果有更好的方式，还望推荐。
以上是关于IE9浏览器onpropertychange和oninput事件对delete键和剪切不触发问题解决方法的主要内容，如果未能解决你的问题，请参考以下文章
oninput,onpropertychange,onchange的用法和区别