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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
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
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
js中有关IE版本检测
2012/01/04 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python2.7到3.x迁移指南
2018/02/01 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
入党积极分子自我鉴定范文
2014/03/25 职场文书
合作协议书范本
2014/04/17 职场文书
四年级学生评语大全
2014/04/21 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
go语言中http超时引发的事故解决
2021/06/02 Golang
python实现简单聊天功能
2021/07/07 Python