地元の商工会議所向けに作成したかなり大規模なカスタム バックエンド システムに取り組んでいます。必要なことの 1 つは、サブフォームのリンク (別のページに投稿されたもの) をクリックしてコンテンツを入力し、失われるのを阻止することです。その時点までに入力した変更または情報。
フォームはかなり大きく、通常は 30 以上のフィールドがあります。以前は、Coldfusion を使用して、そのページの種類 (新規 vs 編集) に基づいて URL に単純な変数を渡すだけでチェックを行っていましたが、物事がより洗練されるにつれて、この種の基本的なアプローチは満足のいくものではありませんでした。
動的でなければなりません。
したがって、基本的に、ユーザーが編集ページで変更を行い、会社の住所セクションで「新しい住所を追加」をクリックしようとすると、変更が検出され (難しい部分)、リンクが無効になります (これは簡単な部分です)。サブミットを実行してメインフォームを保存するまで、新しいアドレスを追加します (同じページにループバックします)。
フィールドに onChange 属性を使用するだけでは機能しません。これは、かなりの数の関数が何らかの関数で既に使用されているためです。
いくつかの異なるスクリプトをいじってみましたが、その多くは $(":input") フィルターを使用しています。
このフィドルはこちら: http://jsfiddle.net/AFahj/50/
var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
if (e.originalEvent.propertyName == "value") {
alert("Value changed!");
}
});
$("#testbox").on("input", function() {
if (!propertyChangeUnbound) {
$("#testbox").unbind("propertychange");
propertyChangeUnbound = true;
}
alert("Value changed!");
});
このフィドル コードは 2 つの部分に分かれています。より最新のブラウザー (下) と古い IE9 より前のがらくた (上) 用の 1 つ。
私が望んでいる基本的な機能を示していますが、問題はフォーム自体の範囲です。彼らは大規模です。単一のスクリプトですべての入力を実行して取得し、変更に基づいてアクションを実行する準備ができるほど柔軟なものが必要です。
では、入力のいずれかが編集されているかどうか (多数の入力がある場合でも) を監視し、適切なアクションを実行できる単一のスクリプトを作成するにはどうすればよいでしょうか?