jQuery互換性のないinputのchangeイベント問題解決プロセス

最近開発されたプロジェクトでは、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); //       
  
            } 
  
 
 

これで解決かと思いきや、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 newVal=($(this).val()); //      
  
                 if (oldVal!=newVal) 
  
                 { 
  
                     computeReceivedsyxcost(); //       
  
                 } 
  
             }); 
  
 
 

繰り返し検証した結果、すべてのブラウザで正常に表示され、互換性の問題が解決しました.