前端页面经常需要实时监听文本输入框的变更,在使用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事件…