HTMLフォームは、ユーザーデータ送信の処理であるWebアプリケーションの基本です。多数のリソースがフォームタグと検証をカバーしていますが、フォームデータのの変更の変更はしばしば見落とされがちです。この記事では、この重要なタスクの効率的な方法について説明します
キーテイクアウト：
フォームデータの変更を検出すると、ユーザーエクスペリエンスとアプリケーションの効率が向上します。 警告は、ユーザーがナビゲートするときに救われていないデータ損失を防ぐことができます。逆に、検出
no- の変更は、サーバー側の処理を最適化します
イベントハンドラーには、一見適しているように見えますが、制限があります。元の値、JavaScript修正値、または動的フォーム要素を効果的に処理する変更は検出されません。 ブラウザの矛盾は、その使用をさらに複雑にします
優れたアプローチでは、デフォルト値を現在の値と比較することが含まれます。 ただし、デフォルト値のプロパティは、フォーム要素タイプによって異なります
-
onchange
フォームアップデートを検出する理由？-
フォーム変更の検出により、いくつかの改善が可能になります：
データの損失の防止：
ページを離れる前に救われていない変更についてユーザーに警告し、潜在的に保存オプションを提供する可能性があります（ajax経由）。
サーバーの負荷の最適化：- 変更が発生していない場合は、不必要なサーバー側の検証とデータ保存を避けます。
- の制限
javascript
イベントハンドラーは、いくつかの欠点に苦しんでいます：
onchange変更された変更：
ユーザーが値を変更してから戻した場合、
は変更を登録します。onchange
javascriptの変更：- javascriptを介してプログラム的に行われた変更は。
大きな形のオーバーヘッド
onchange大きな形の多数の要素に
- を付着すると、ブラウザのパフォーマンスに影響します。
ダイナミックフォーム：
onchangeフォーム要素を追加または削除するには、イベントハンドラーを動的に管理する必要があります。 >
-
ブラウザの矛盾：チェックボックスとラジオボタンの動作は、すべてのブラウザで一貫していません。
onchange
より堅牢なアプローチ：デフォルト値の比較-
各フォーム要素は、初期状態を反映したデフォルト値プロパティを所有しています。このデフォルト値を現在の値と比較すると、変更が確実に検出されます。 ただし、特定のプロパティは次のように異なります
- テキスト入力とテキストリアス：
onchangeこれらの要素は プロパティを使用します。 簡単な比較で十分です：
これは、標準およびHTML5入力タイプ（電子メール、Tel、URLなど）で機能します。
チェックボックスとラジオボタン：
これらはdefaultCheckedプロパティ（boolean）を使用します：
var name = document.getElementById("name");
if (name.value !== name.defaultValue) alert("#name has changed");ログイン後にコピー
注：defaultValueは存在しますが、チェック状態ではなく、value属性を反映しています。
ボックスを選択する（ドロップダウン）：
以上がHTMLフォームが変更されたことを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
