最近開發一個項目,需要實現用戶在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(); //不相同則計算
}
});
經反復驗證,在所有的浏覽器下均顯示正常,解決了兼容的問題!