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.js是否已加载的判断代码
May 20 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
js取得url地址参数实例
Feb 22 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JavaScript函数绑定用法实例分析
Nov 14 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
linux下php上传文件注意事项
2016/06/11 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Django中使用Celery的教程详解
2018/08/24 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python获取整个网页源码的方法
2020/08/03 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
新护士岗前培训制度
2014/02/02 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
父亲节感言
2015/08/03 职场文书
《将心比心》教学反思
2016/02/23 职场文书