oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出

朱雀 2020-09-12 00:47 702阅读 0赞

（注：本文针对IE8ji以上版本）

oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况：

在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代oninput，在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

最后需要注意的是：oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。

最好是IE8用onpropertychange，其他用oninput 。

Juqery中区别IE8级以上

检查是否为IE 6-8  
if (!$.support.leadingWhitespace) \{//IE 6-8\}

Tips:jQuery从1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持IE 6/7/8。 以后，如果用户需要支持IE6/7/8，只能使用jQuery1.9。

堆栈溢出

在 IE8 中使用onpropertychange时，出现了stack overflow的弹框提示。

原因：监控输入框输入的时候，不论输入的是非数字还是数字，都会对输入值进行处理。处理后由于输入框value值发生变化，于是又走进onpropertychange的监控中，死循环造成堆栈溢出。（oninput没有这个问题）

解决办法：输入值改变时，input立即失焦并解除onpropertychange事件，然后改变value，然后input再聚焦并绑定onpropertychange事件。这个方法IE8有弊端，输入过快时会消耗大量的cpu与内存。

其实最好的方法就是在这个输入框禁止用户右键操作，这样啥问题都没有了，哈哈。

$(document).bind("contextmenu",function(){return false;});