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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 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实现文件安全下载
2006/10/09 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python实现的多线程http压力测试代码
2017/02/08 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python实现SOM算法
2018/02/23 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
基于python3生成标签云代码解析
2020/02/18 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
什么是方法的重载
2013/06/24 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
银行工作检查书范文
2014/01/31 职场文书
物流专员岗位职责
2014/02/17 职场文书
工作决心书范文
2014/03/11 职场文书
争做文明公民倡议书
2014/08/29 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
法学专业求职信范文
2015/03/19 职场文书
企业战略合作意向书
2015/05/08 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL