jQuery不兼容input的change事件问题解决过程


Posted in Javascript onDecember 05, 2014

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

$("input.syxcost").change(function(){

   computeReceivedsyxcost();

}

function computeReceivedsyxcost(){  //计算加总

              var syxcost=0;

              $("input.syxcost").each(function(){

                 var cost=parseFloat($(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 newVal=($(this).val()); //获取当前值

                if (oldVal!=newVal)

                {

                    computeReceivedsyxcost(); //不相同则计算

                }

            });

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

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 #Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 #Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
javascript数组遍历for与for in区别详解
Dec 04 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP insert语法详解
2008/06/07 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
一端时间轮换的广告
2006/06/26 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python排序方法实例分析
2015/04/30 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
redis 解决库存并发问题实现数量控制
2022/04/08 Redis