JQuery is not compatible with the change event issue resolution process of input

  • 2020-03-30 04:29:51
  • OfStack

Recently developed a project, the need to implement the user in a WEB form multiple INPUT box after INPUT the number, immediately enter the sum of the number of automatic calculation aggregation, and displayed in the specified INPUT box, the function realization of the principle is simple, is only need to INPUT the onchange event of computing aggregation and the result is assigned to the specified INPUT box can be realized, the code is as follows:


$("input.syxcost").change(function(){
   computeReceivedsyxcost();
}
function computeReceivedsyxcost(){  //Calculate the sum
              var syxcost=0;
              $("input.syxcost").each(function(){
                 var cost=parseFloat($(this).val());
                 if (!isNaN(cost))
                    syxcost=syxcost + cost;
              });
              $("#receivedsyxcost").val(syxcost); //Displays the final result
           }

Thought thus solved, in the Google browser is OK, but in Internet explorer 9, only to find that after INPUT the number in the INPUT, will not immediately trigger the change event, compatible problems, search on the Internet a lot of, are also saying that there is the problem, there is no way, I have only oneself to according to the implementation situation to write, my idea is: when the INPUT focus, get the current VALUE to the INPUT of the custom attributes (such as: Data-oval), and then when the INPUT loses focus, it will get whether the current VALUE is the same as the VALUE in the previously existing custom attribute. If not, it means that the VALUE has been changed and needs to be recalculated. Otherwise, the implementation code is as follows:


$("input.syxcost").focus(function(){
                $(this).attr("data-oval",$(this).val()); //Stores the current value in the custom property
            }).blur(function(){
                var oldVal=($(this).attr("data-oval")); //Gets the original value
                var newVal=($(this).val()); //Gets the current value
                if (oldVal!=newVal)
                {
                    computeReceivedsyxcost(); //If not, calculate
                }
            });

After repeated verification, in all browsers are displayed normally, solve the compatibility problem!


Related articles: