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