フォームフォームにおける読み取り専用と無効の違いについての深い理解

WBOY

リリース： 2018-10-30 10:03:21

転載

3145 人が閲覧しました

この記事では、主に Readonly と Disabled の違いを形式で紹介します。非常に詳細かつ包括的です。関連情報を知りたい友人は、よく読んでください。

読み取り専用は入力 (テキスト/パスワード) とテキストエリアにのみ有効ですが、無効は選択、ラジオ、チェックボックス、ボタンなどを含むすべてのフォーム要素に有効です。

しかし、form 要素が無効になった後、POST または GET でフォームを送信すると、この要素の値は渡されず、readonly によって渡されます (この状況はこの問題は、フォームの textarea 要素を無効または読み取り専用に設定すると発生しますが、送信ボタンは使用できます)。

一般的によくある状況は次のとおりです。

一意の識別コードがユーザーのフォームに事前に入力されており、ユーザーはそれを変更できませんが、送信時この値を渡す必要がある場合は、その属性を readonly に設定する必要があります。

ユーザーがフォームを正式に送信し、管理者による情報検証を待つ必要がある場合、ユーザーはフォーム内のデータを変更することはできず、表示のみが可能であることがよくあります。広範囲の無効な要素に対して、ユーザーはフォーム内のデータを変更することができないため、この時点では無効を使用する必要がありますが、同時に送信ボタンも無効にする必要があることに注意してください。それ以外の場合、ユーザーがこのボタンを押している限り、データベース操作ページで整合性チェックが行われていない場合、データベース内の値はクリアになります。

この場合、無効にする代わりに readonly を使用する場合、フォーム内に input (text/password) 要素と textarea 要素しかない場合は、まだ可能です。他の要素がある場合は、 select など、ユーザーは値を書き換えた後に Enter キーを押して送信できます (Enter はデフォルトの送信トリガーキーです)。

ユーザーが送信ボタンを押した後、JavaScript を使用して送信ボタンを無効にすることがよくあります。これにより、ネットワーク状態が悪い環境ではユーザーが送信ボタンを繰り返しクリックすることができなくなり、データが重複して保存されます。データベース。

disabled と readonly の 2 つの属性には共通点があります。たとえば、両方が true に設定されている場合、form 属性は編集できません。js を記述するときにこれらを混合するのは簡単です。実際には、2 つの属性の間には特定の違いがあります。

入力項目の無効が true に設定されている場合、フォーム入力項目はフォーカスを取得できず、すべてのユーザー操作 (マウスのクリックやキーボード入力など) が無効になります。最も重要なことは、フォームが送信されるときに、フォーム入力は送信されないということです。

Readonly は、テキストを入力できるテキスト入力ボックスなどの入力項目のみに使用されます。true に設定すると、ユーザーは対応するテキストを編集できなくなりますが、フォーカスして送信することはできます。フォームに入力すると、入力した項目がフォームの項目として送信されます。