Recently developed a project, need to implement the user in the Web Form in multiple input boxes in the number, immediately automatically calculate the sum of the total number of inputs and display in the specified input box, the principle of the implementation of this function is simple, It is only necessary 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 code as follows:
$ ("Input.syxcost"). Change (function () {
Computereceivedsyxcost ();
}
function Computereceivedsyxcost () {//Calculate add Total
var syxcost=0;
$ ("Input.syxcost"). each (function () {
var cost=parsefloat ($ (this). Val ());
if (!isnan (cost))
Syxcost=syxcost + cost;
});
$ ("#receivedsyxcost"). Val (syxcost); Show final Results
}
Originally thought this solves, in Google Browser is really ok, but in IE 9, but found in input quantity, and will not immediately trigger the change event, there is a compatibility problem, search on the internet a lot, also said that there is no way, I will only be based on the implementation of their own to write, My train of thought is: When input gets the focus, it gets the current value and stores the input's custom properties (such as: Data-oval) and then, when input loses focus, gets whether the current value is the same as the values in the previously existing custom attribute, if not the same , the value is changed, it needs to be recalculated, otherwise ignored, the implementation code is as follows:
Copy Code code as follows:
$ ("Input.syxcost"). focus (function () {
$ (this). attr ("Data-oval", $ (this). Val ()); Save current value to custom attribute
}). blur (function () {
var oldval= ($ (this). attr ("Data-oval")); Get the original value
var newval= ($ (this). Val ()); Get Current value
if (oldval!=newval)
{
Computereceivedsyxcost (); Does not have the same calculation
}
});
After repeated verification, in all browsers are displayed normal, solve the problem of compatibility!