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 日期控件datepicker属性详细解析
Nov 08 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
详解Python中is和==的区别
2019/03/21 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
护士实习生自我鉴定范文
2013/12/10 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
新三好学生主要事迹
2014/01/23 职场文书
全国文明单位申报材料
2014/05/31 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
小学数学教学反思范文
2016/02/16 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书