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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
js进行表单验证实例分析
Feb 10 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python使用配置文件过程详解
2019/12/28 Python
Python list运算操作代码实例解析
2020/01/20 Python
python3中数组逆序输出方法
2020/12/01 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
全陪导游欢迎词
2014/01/17 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android