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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 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基础知识:类与对象(1)
2006/12/13 PHP
php csv操作类代码
2009/12/14 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
django实现用户注册实例讲解
2019/10/30 Python
python实现批量文件重命名
2019/10/31 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
松材线虫病防治方案
2014/06/15 职场文书
国贸专业求职信
2014/06/28 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
七年级作文之下雨天
2019/12/23 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
详细介绍python操作RabbitMq
2022/04/12 Python