jQuery關(guān)于input的change事件不兼容的問題解決辦法詳解

最近開發(fā)一個(gè)項(xiàng)目，需要實(shí)現(xiàn)用戶在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)，代碼如下：

$("input.syxcost").change(function(){
 computeReceivedsyxcost();
}
function computeReceivedsyxcost(){ //計(jì)算加總
 var syxcost=0;
 $("input.syxcost").
each
(function(){
 var cost=parse
Float
($(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ǎng)上搜了許多，也都說(shuō)存在這個(gè)問題，沒有辦法，我就只有自己來(lái)依據(jù)實(shí)現(xiàn)情況來(lái)寫，我的思路是：當(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)代碼如下：

$("input.syxcost").focus(function(){
 $(this).attr("data-oval",$(this).val()); //將當(dāng)前值存入自定義屬性
 }).blur(function(){
 var oldVal=($(this).attr("data-oval")); //獲取原值
 var 
new
Val=($(this).val()); //獲取當(dāng)前值
 if (oldVal!=newVal)
 {
 computeReceivedsyxcost(); //不相同則計(jì)算
 }
 });

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com