ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery は入力変更イベントの問題解決 process_jquery と互換性がありません

jQuery は入力変更イベントの問題解決 process_jquery と互換性がありません

WBOY
リリース: 2016-05-16 16:29:05
オリジナル
1419 人が閲覧しました

最近開発したプロジェクトでは、ユーザーが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(); //同じでない場合は計算します
}
});

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート