jQuery关于input的change事件不兼容的问题解决办法详解

来源：动视网责编：小采时间：2020-11-27 20:18:30

jQuery关于input的change事件不兼容的问题解决办法详解

jQuery关于input的change事件不兼容的问题解决办法详解:本文记录了在项目中发现在IE9中不会立即触发change事件，存在兼容问题的解决过程，非常的详尽，解决过程中也有新问题出现，最终都解决完毕，完美实现了兼容各大主流浏览器最近开发一个项目，需要实现用户在WEB表单里的多个INPUT框中输入数量后，立即自动计算

推荐度：

点击下载本文 文档为doc格式

导读jQuery关于input的change事件不兼容的问题解决办法详解:本文记录了在项目中发现在IE9中不会立即触发change事件，存在兼容问题的解决过程，非常的详尽，解决过程中也有新问题出现，最终都解决完毕，完美实现了兼容各大主流浏览器最近开发一个项目，需要实现用户在WEB表单里的多个INPUT框中输入数量后，立即自动计算

本文记录了在项目中发现在IE9中不会立即触发change事件，存在兼容问题的解决过程，非常的详尽，解决过程中也有新问题出现，最终都解决完毕，完美实现了兼容各大主流浏览器

最近开发一个项目，需要实现用户在WEB表单里的多个INPUT框中输入数量后，立即自动计算加总各项输入的数量之和，并显示在指定的INPUT框中，这个功能实现的原理是简单的，就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现，代码如下：

$("input.syxcost").change(function(){
 computeReceivedsyxcost();
}
function computeReceivedsyxcost(){ //计算加总
 var syxcost=0;
 $("input.syxcost").
each
(function(){
 var cost=parse
Float
($(this).val());
 if (!isNaN(cost))
 syxcost=syxcost + cost;
 });
 $("#receivedsyxcost").val(syxcost); //显示最终结果
 }

原以为这样就解决了，在谷歌浏览器确实是OK的，但在IE 9中，却发现在INPUT中输入数量后，并不会立即触发change事件，存在兼容问题，在网上搜了许多，也都说存在这个问题，没有办法，我就只有自己来依据实现情况来写，我的思路是：当INPUT获取焦点时，就获取当前的VALUE并存入该INPUT的自定义的属性中（如：data-oval），然后在INPUT失去焦点的时候，就获取当前的VALUE与之前存在自定义的属性中的值是否相同，若不相同，则说明VALUE被改变，就需要重新计算，否则忽略，实现代码如下：

$("input.syxcost").focus(function(){
 $(this).attr("data-oval",$(this).val()); //将当前值存入自定义属性
 }).blur(function(){
 var oldVal=($(this).attr("data-oval")); //获取原值
 var 
new
Val=($(this).val()); //获取当前值
 if (oldVal!=newVal)
 {
 computeReceivedsyxcost(); //不相同则计算
 }
 });

经反复验证，在所有的浏览器下均显示正常，解决了兼容的问题！

jQuery关于input的change事件不兼容的问题解决办法详解

推荐度：

点击下载本文 文档为doc格式

标签：兼容问题 input 问题的解决办法

热门焦点

jQuery关于input的change事件不兼容的问题解决办法详解

jQuery关于input的change事件不兼容的问题解决办法详解

jQuery关于input的change事件不兼容的问题解决办法详解

最新推荐

猜你喜欢

热门推荐