IE9浏览器,退格键触发不了propertychange事件的解决办法

  前端页面经常需要实时监听文本输入框的变更,在使用input、propertychange事件时发现在ie9浏览器中,退格、删除按钮都无法触发该事件,网上搜了一下发现ie9还存在比较多的问题(详细可见,参考文章:IE9的一个BUG

方法一、添加keyup事件

  可解决键盘输入类型触发问题,这里需要注意的是有的按键并不一定有改变输入的行为。

$("#myInput").bind("input propertychange change keyup",function() {
}
方法二、使用定时器

  添加一个定时器,每隔xx毫秒执行一次,手动触发propertychange事件;可在输入框获得焦点时添加定时器,失去焦点时移除定时器,如果焦点一直在输入框中,则会一直执行,比较消耗内存,而且性能比较低。如果对输入框要求性能比较高,或者需要处理的逻辑较多时,不建议使用。

var browserType = getBrowserType();
if (browserType === "IE9") {
    var intervalName;
    var $myInput = $("#myInput");
    $myInput.focus(function () {
        intervalName = setInterval(function () {
            $myInput.trigger("propertychange");
        }, 300); //每隔300毫秒执行一次
    });
    $myInput.blur(function () {
        clearInterval(intervalName);
    });
}
function getBrowserType() {
     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
     var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
     var isEdge = (userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1|| userAgent.indexOf("Windows NT 6.1; WOW64; Trident/7.0;")) && !isIE; //判断是否IE的Edge浏览器
     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
     var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1; //判断是否Safari浏览器
     var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
     if (isIE) {
         var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
         reIE.test(userAgent);
         var fIEVersion = parseFloat(RegExp["$1"]);
         if (fIEVersion === 7) { return "IE7";}
         else if (fIEVersion === 8) { return "IE8";}
         else if (fIEVersion === 9) { return "IE9";}
         else if (fIEVersion === 10) { return "IE10";}
         else if (fIEVersion === 11) { return "IE11";}
         else { return "0"}//IE版本过低
     }//isIE end

     if (isFF) {  return "FF";}
     if (isOpera) {  return "Opera";}
     if (isSafari) {  return "Safari";}
     if (isChrome) { return "Chrome";}
     if (isEdge) { return "Edge";}
 }

∗ 注 : \color{#FF3030}{*注:} 参考文章:定时器解决IE9中propertychange和input事件…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值