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 相关文章推荐
Javascript中的this绑定介绍
Sep 22 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue elementUI批量上传文件
Apr 26 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
留言板翻页的实现详解
2006/10/09 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
学习ExtJS border布局
2009/10/08 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js获取Get值的方法
2016/09/29 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
学习python分支结构
2019/05/17 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
青年文明号服务承诺
2014/03/31 职场文书
合伙经营协议书
2014/04/18 职场文书
创文明城市标语
2014/06/16 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Python面向对象编程之类的概念
2021/11/01 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript