开发者社区> 技术小牛人> 正文

关于解决JQUERY对INPUT元素Change事件不兼容的问题

简介:
+关注继续查看

最近开发一个项目,需要实现用户在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(); //不相同则计算
                }
            });
复制代码

经反复验证,在所有的浏览器下均显示正常,解决了兼容的问题!

原文出自我的个人网站:http://www.zuowenjun.cn/post/2014/09/22/39.html

本文转自 梦在旅途 博客园博客,原文链接:http://www.cnblogs.com/zuowj/p/3986480.html  ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery prop('checked', true)解决attr('checked', true)不能选中radio问题
正如标题所言,使用:prop('checked', true)就可以了
673 0
解决jquery.validate.js的验证bug
版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7 问题: a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成空白的【原来的默认提示没了】 b.
1045 0
【MaxCompute 常见问题】 产品简介
MaxCompute相关术语有哪些? 在开始使用 MaxCompute 产品前,您可以提前查阅 MaxCompute 所涉及的术语及其含义,为了解产品及快速上手提供帮助。您可以看下官方文档,将为您介绍 MaxCompute 涉及的术语及其概念。
174 0
使用xshell连接服务器问题:ssh_exchange_identification: Connection closed by remote host
在连接服务器的时候遇到了如下的问题: 在网上查找方法: 1、让/etc/hosts.allow 和/etc/hosts.
1332 0
C# 遍历List 并删除某个元素
1、我们选择用for循环, for(int i=0;i {      if(list[i])     {         list.
1189 0
【技术贴】解决Eclipse启动不了,一闪而过的问题
eclipse启动不了,双击程序后splash一闪而过,没有任何错误提示。怎么办??   是因为jdk自己升级把自己玩死了,去C:\Windows\System32目录下,里面多了三个文件,分别是   1.java.exe 2.javaw.exe 3.javaws.exe   删除这三个文件,立即就能让你的eclipse起死回生。
804 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载