入力の変更イベントの非互換性問題に対する jQuery の解決策の詳細な説明

この記事は、IE9 では変更イベントがすぐにトリガーされないというプロジェクトでの発見を記録しています。互換性の問題の解決プロセスは非常に詳細であり、解決プロセス中に新しい問題も発生し、最終的には解決されました。すべての主要な主流ブラウザとの互換性

は最近、ユーザーが 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 Chrome は確かに問題ありませんが、IE 9 では、INPUT に金額を入力しても変更イベントがすぐにトリガーされないことがわかりました。インターネットでよく調べたところ、すべてがそう言っています。この問題は存在し、解決策はありません。実装に基づいて自分で記述する必要があります。私の考えは、INPUT がフォーカスを取得したときに、現在の VALUE を取得して、それを INPUT のカスタム 属性 に保存するというものです。 as: 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 の解決策の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。