jQuery is not compatible with the input change event problem solving process

jQuery is not compatible with the input change event problem solving process_jquery

WBOY

Release： 2016-05-16 16:29:05

Original

1413 people have browsed it

A project recently developed requires that after the user inputs quantities into multiple INPUT boxes in a WEB form, the sum of the input quantities will be automatically calculated and displayed in the specified INPUT box. This function is implemented The principle is simple, that is, you only need to calculate the sum in the onchange event of INPUT and assign the result to the specified INPUT box. The code is as follows:

Copy code 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); //Show the final result

           }

I thought this would solve it. It is indeed OK in Google Chrome. However, in IE 9, I found that after entering the quantity in INPUT, the change event will not be triggered immediately. There is a compatibility issue. I searched online. Many people say that this problem exists, and there is no way. I have to write it myself based on the implementation. My idea is: when the INPUT gets the focus, get the current VALUE and store it in the custom attribute of the INPUT. (such as: data-oval), then when INPUT loses focus, get whether the current VALUE is the same as the value in the previously customized attribute. If not, it means that the VALUE has been changed and needs to be recalculated. Otherwise Ignore, the implementation code is as follows:

Copy code The code is as follows:

$("input.syxcost").focus(function(){

                   $(this).attr("data-oval",$(this).val()); //Save the current value into the custom attribute

               }).blur(function(){

                    var oldVal=($(this).attr("data-oval")); //Get the original value

              var newVal=($(this).val()); //Get the current value

If (oldVal!=newVal)

                                                {

computeReceivedsyxcost(); //If not the same, calculate

                }

            });

After repeated verification, it displays normally in all browsers, solving the compatibility problem!