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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
使用户点击后退按钮使效三行代码
Jul 07 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
基于PHP pthreads实现多线程代码实例
Jun 24 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利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
js 小贴士一星期合集
2010/04/07 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python的id()函数解密过程
2012/12/25 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python版学生管理系统
2018/01/10 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
C#面试题
2016/05/06 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
师德师风演讲稿
2014/05/05 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年环保工作总结
2014/11/26 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Golang Web 框架Iris安装部署
2022/08/14 Python