最近開発したプロジェクトでは、ユーザーがWEBフォーム内の複数のINPUTボックスに数量を入力すると、入力された数量の合計が自動的に計算され、指定されたINPUTボックスに表示されるという機能が実装されています。原理は簡単です。つまり、INPUT の onchange イベントで合計を計算し、その結果を指定された INPUT ボックスに割り当てるだけです。コードは次のとおりです。
$("input.syxcost").change(function(){
computeReceivedsyxcost();
}
function computeReceivedsyxcost(){ //合計を計算します
var syxcost=0;
$("input.syxcost").each(function(){
varcost=parseFloat($(this).val());
If (!isNaN(コスト))
syxcost=syxcost コスト;
});
$("#receivedsyxcost").val(syxcost) // 最終結果を表示
}
これで解決すると思いましたが、IE 9 では、INPUT に数量を入力してもすぐに変更イベントがトリガーされないことがわかりました。多くの人がこの問題が存在すると言っていますが、実装に基づいて自分で記述する必要があるのは、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(); //同じでない場合は計算します
}
});
検証を繰り返した結果、すべてのブラウザで正常に表示され、互換性の問題は解決されました。