zoukankan      html  css  js  c++  java
  • 关于解决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

  • 相关阅读:
    bus总线
    vue 动态组件、父子组件传参
    echarts
    记录板
    留言板
    如何移除双系统mac中的windows系统
    Kernel,Shell,Bash 的关系
    zju 校队选拔 被虐记
    COGS 2638. 数列操作ψ 线段树
    退役公告【现已复活】
  • 原文地址:https://www.cnblogs.com/zuowj/p/3986480.html
Copyright © 2011-2022 走看看