快捷導(dǎo)航

jQuery不兼容input的change事件問(wèn)題解決過(guò)程

更新時(shí)間：2014年12月05日 09:31:49 投稿：hebedich

本文記錄了在項(xiàng)目中發(fā)現(xiàn)在IE9中不會(huì)立即觸發(fā)change事件，存在兼容問(wèn)題的解決過(guò)程，非常的詳盡，解決過(guò)程中也有新問(wèn)題出現(xiàn)，最終都解決完畢，完美實(shí)現(xiàn)了兼容各大主流瀏覽器

最近開(kāi)發(fā)一個(gè)項(xiàng)目，需要實(shí)現(xiàn)用戶(hù)在WEB表單里的多個(gè)INPUT框中輸入數(shù)量后，立即自動(dòng)計(jì)算加總各項(xiàng)輸入的數(shù)量之和，并顯示在指定的INPUT框中，這個(gè)功能實(shí)現(xiàn)的原理是簡(jiǎn)單的，就是只需要在INPUT的onchange事件中計(jì)算加總并將結(jié)果賦給指定的INPUT框中即可實(shí)現(xiàn)，代碼如下：

復(fù)制代碼代碼如下:

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

   computeReceivedsyxcost();

}

function computeReceivedsyxcost(){  //計(jì)算加總

              var syxcost=0;

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

                 var cost=parseFloat($(this).val());

                 if (!isNaN(cost))

                    syxcost=syxcost + cost;

              });

              $("#receivedsyxcost").val(syxcost); //顯示最終結(jié)果

           }

原以為這樣就解決了，在谷歌瀏覽器確實(shí)是OK的，但在IE 9中，卻發(fā)現(xiàn)在INPUT中輸入數(shù)量后，并不會(huì)立即觸發(fā)change事件，存在兼容問(wèn)題，在網(wǎng)上搜了許多，也都說(shuō)存在這個(gè)問(wèn)題，沒(méi)有辦法，我就只有自己來(lái)依據(jù)實(shí)現(xiàn)情況來(lái)寫(xiě)，我的思路是：當(dāng)INPUT獲取焦點(diǎn)時(shí)，就獲取當(dāng)前的VALUE并存入該INPUT的自定義的屬性中（如：data-oval），然后在INPUT失去焦點(diǎn)的時(shí)候，就獲取當(dāng)前的VALUE與之前存在自定義的屬性中的值是否相同，若不相同，則說(shuō)明VALUE被改變，就需要重新計(jì)算，否則忽略，實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

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

                $(this).attr("data-oval",$(this).val()); //將當(dāng)前值存入自定義屬性

            }).blur(function(){

                var oldVal=($(this).attr("data-oval")); //獲取原值

                var newVal=($(this).val()); //獲取當(dāng)前值

                if (oldVal!=newVal)

                {

                    computeReceivedsyxcost(); //不相同則計(jì)算

                }

            });

經(jīng)反復(fù)驗(yàn)證，在所有的瀏覽器下均顯示正常，解決了兼容的問(wèn)題！

您可能感興趣的文章: