HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにします。しかし、それらの間には微妙な違いがあり、次のようにまとめられます。

Readonly は入力 (テキスト / パスワード) とテキストエリアにのみ有効ですが、disabled はすべてのフォーム要素に有効です。ただし、フォーム要素が無効にされた後、POST または GET 経由でフォームを送信すると、この要素の値は渡されませんが、readonly は値を渡します(readonly は値の変更を受け入れ、送り返すことができますが、disable は変更を受け入れますが、データを送り返しません)。

より一般的な状況は次のとおりです。

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

2. ユーザーがフォームを正式に送信した後、管理者が情報を確認するまで待つ必要があることがよくあります。これにより、ユーザーはフォーム内のデータを変更できず、表示のみが可能になります。disabled にはさまざまな要素があるため、このときに使用する必要があります。ただし、送信ボタンも無効にする必要があることに注意してください。そうしないと、ユーザーがこのボタンを押した限り、データベース操作ページで整合性チェックが実行されないと、データベース内の値がクリアされます。この場合、無効ではなく読み取り専用を使用すると、フォームに入力 (テキスト/パスワード) とテキストエリア要素のみがある場合は問題ありません。選択などの他の要素がある場合は、ユーザーは値を書き換えて Enter キーを押して送信できます (Enter はデフォルトの送信トリガー キーです)。

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

disabled 属性と readonly 属性にはいくつかの類似点があります。たとえば、両方を true に設定すると、フォーム属性は編集できなくなります。js コードを書くときに、これら 2 つの属性を混在させるのはよくあることです。実際、これら 2 つの属性にはいくつかの違いがあります。

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

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

上記の記事では、HTML の入力の読み取り専用属性と無効属性の違いについて簡単に説明しました。エディターが皆さんと共有する内容はこれだけです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

元の URL: http://blog.csdn.net/playboyanta123/article/details/12682419#comments