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 可拖拽的窗体控件实现代码
Mar 21 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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类
2006/11/25 PHP
PHP中文汉字验证码
2007/04/08 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP加密技术的简单实现
2016/09/04 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Linux面试题LINUX系统类
2015/11/25 面试题
管理失职检讨书
2015/05/05 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS