DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery不兼容input的change事件問題解決過程
jQuery不兼容input的change事件問題解決過程
編輯:JQuery特效代碼     

最近開發一個項目,需要實現用戶在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(); //不相同則計算
                }
            });

經反復驗證,在所有的浏覽器下均顯示正常,解決了兼容的問題!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved