1. ホーム
  2. Web制作
  3. HTML/Xhtml

ReadonlyとDisabledのわずかな違いについて説明します。

2022-01-10 15:33:55
ReadonlyとDisabledは、どちらもユーザーがフォームフィールドの内容を変更できないようにするために使用することができます。しかし、両者には細かな違いがあり、それをまとめると以下のようになります。
/{br
readonly は input(text / password) と textarea に対してのみ有効で、disabled はすべてのフォーム要素に対して有効です。しかし disabled を使用した後、POST または GET でフォームを送信する場合、この要素の値は渡されませんが、readonly は値を渡します (readonly は値の変更を受け付け、それを戻すことができます。disable は変更を受け付けるがデータを戻しません。) 。
一般的に多いのは、このケースです。
ユーザーに対して一意の識別子があらかじめ入力されており、ユーザーがそれを変更することができないが、その値で送信する必要があるフォームでは、そのプロパティを読み取り専用に設定する必要があります。
ユーザーが正式にフォームを送信し、管理者の情報検証を待つ必要がある場合、ユーザーはフォーム内のデータを変更することができず、閲覧のみ可能であるということがよくあります。 ボタンで、データベース操作ページで整合性チェックが行われないと、データベース内の値はクリアされます。この場合、disabledの代わりにreadonlyを使用すると、フォームにinput(text / password)とtextarea要素しかない場合でも可能で、selectなど他のヘアー要素がある場合は、ユーザーが値を書き換え、エンターキーを押して送信できます(エンターはデフォルトで送信トリガーキーです)。
ユーザーが送信ボタンを押した後、送信ボタンを無効にするためにjavascriptを使用することがよくあります。これにより、ネットワークの状態が悪いときにユーザーが何度も送信ボタンをクリックして、データベースにデータが重複して保存されることを防いでいます。
/{br
disabledとreadonlyの2つのプロパティには共通点があり、例えば両方ともtrueに設定するとフォーム属性が編集できなくなるなど、jsコードを書く際にこの2つのプロパティを混在させやすいことがあります。
入力のdisabledがtrueに設定されると、フォーム入力はフォーカスを得ることができず、すべてのユーザーアクション(マウスクリック、キーボード入力など)はその入力に対して無効となります。
trueに設定すると、ユーザーは対応するテキストを編集できないだけで、フォーカスすることは可能で、フォーム送信時には、その入力はフォーム項目の1つとして送信されます。