web-dev-qa-db-ja.com

HTMLフォーム入力フィールドに対するdisabled = "disabled"とreadonly = "readonly"の違いは何ですか？

私はこれについて少し読んだことがありますが、私は異なるブラウザがどのように物事を扱うかについて確固たるものを見つけることができません。

htmlcross-browser
380
Andy

readonly要素は編集できませんが、対応するformが送信したときに送信されます。 disabled要素は編集できず、送信時に送信されません。もう1つの違いは、readonly要素にフォーカスを合わせることができ（フォームを "タブ移動"するときにフォーカスを合わせることができます）、disabled要素にはフォーカスできないことです。

でこれについてもっと読む この素晴らしい記事 または w3cによる定義 。重要な部分を引用すると：

主な違い

無効属性

  • 無効なフォーム要素の値はプロセッサメソッドに渡されません。 W3Cはこれを成功した要素と呼びます（これはチェックされていないフォームのチェックボックスと同じように機能します）。
  • ブラウザによっては、無効になっているフォーム要素のデフォルトのスタイルを上書きまたは提供する場合があります。 （テキストをグレーアウトまたはエンボスする）Internet Explorer 5.5は、これに関して特に厄介です。
  • 無効なフォーム要素はフォーカスを受けません。
  • 無効になっているフォーム要素は、タブナビゲーションではスキップされます。

読み取り専用属性

  • すべてのフォーム要素にreadonly属性があるわけではありません。最も注目すべきは、<SELECT>、<OPTION>、および<BUTTON>の各要素には読み取り専用の属性がないことです（両方とも無効の属性があります）。
  • ブラウザは、フォーム要素が読み取り専用であるというデフォルトのオーバーライドされた視覚的なフィードバックを提供しません。 （これは問題になる可能性があります…下記参照）
  • Readonly属性が設定されているフォーム要素はフォームプロセッサに渡されます。
  • 読み取り専用フォーム要素はフォーカスを受け取ることができます
  • タブナビゲーションには、読み取り専用のフォーム要素が含まれています。
649
oezi

要素がdisabled属性を持っているときはイベントは発生しません。

以下のどれもトリガーされません。

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

読み取り専用の間にトリガーされます。

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
84
Hrishabh Gupta

無効にすると、フォームの送信時にそのフォーム要素のデータは送信されません。読み取り専用とは、要素内のデータが送信されることを意味しますが、ユーザーが変更することはできません。

例えば：

<input type="text" name="yourname" value="Bob" readonly="readonly" />

これにより、要素 "yourname"に値 "Bob"が送信されます。

<input type="text" name="yourname" value="Bob" disabled="disabled" />

これは、要素 "yourname"には何も送信しません。

29
Michael Irigoyen

Disabled属性を持つ要素は送信されないか、その値が要求と共に送信されないと言うことができます。

すなわち.

<input type="textbox" name="field" value="field" disabled="disabled" />

差

  • 無効になっているコントロールはフォーカスを受けません。
  • 無効化されたコントロールはタブナビゲーションでスキップされます。
  • 無効にされたコントロールは正常に投稿できません。

フィールドのデータを投稿したい場合はreadonly属性を使用してください。

すなわち.

<input type="textbox" name="field" value="field" readonly="readonly" />
  • 読み取り専用要素はフォーカスを受け取りますが、ユーザーが変更することはできません。
  • 読み取り専用要素は、タブナビゲーションに含まれています。
  • 読み取り専用要素が正常に投稿されました。
8
user1787700

他の答えと同じです（無効化はサーバーに送信されず、読み取り専用です）が、無効化されたフォームの強調表示を禁止するブラウザもありますが、読み取り専用は依然として強調表示（およびコピー）できます。

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

読み取り専用フィールドは変更できません。ただし、ユーザーはタブで移動して強調表示し、そこからテキストをコピーすることができます。

3
Tim