首頁 > web前端 > js教程 > 主體

jQuery關於input的change事件不相容的問題解決方法詳解

黄舟
發布: 2017-06-27 09:38:01
原創
1948 人瀏覽過

本文記錄了在專案中發現在IE9中不會立即觸發change事件,存在兼容問題的解決過程,非常的詳盡,解決過程中也有新問題出現,最終都解決完畢,完美實現了兼容各大主流瀏覽器

最近開發一個項目,需要實現用戶在WEB表單裡的多個INPUT框中輸入數量後,立即自動計算加總各項輸入的數量之和,並且顯示在指定的INPUT框中,這個功能實現的原理是簡單的,就是只需要在INPUT的onchange事件中計算加總並將結果賦給指定的INPUT框中即可實現,程式碼如下:

$("input.syxcost").change(function(){
   computeReceivedsyxcost();
}
function computeReceivedsyxcost(){  //计算加总
              var syxcost=0;
              $("input.syxcost").
each
(function(){
                 var cost=parse
Float
($(this).val());
                 if (!isNaN(cost))
                    syxcost=syxcost + cost;
              });
              $("#receivedsyxcost").val(syxcost); //显示最终结果
           }
登入後複製

原以為這樣就解決了,在Google瀏覽器確實是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 
new
Val=($(this).val()); //获取当前值
                if (oldVal!=newVal)
                {
                    computeReceivedsyxcost(); //不相同则计算
                }
            });
登入後複製

經過重複驗證,在所有的瀏覽器下均顯示正常,解決了相容的問題!

以上是jQuery關於input的change事件不相容的問題解決方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板