Was ist der Unterschied zwischen disabled="disabled" und readonly="readonly" für HTML-Formulareingabefelder?

Question

Ich habe ein wenig darüber gelesen, aber ich kann nichts Handfestes darüber finden, wie die verschiedenen Browser die Dinge behandeln.

Answer 1

A readonly Element ist nur nicht editierbar, sondern wird gesendet, wenn das entsprechende form einreicht. A disabled Element ist nicht bearbeitbar und wird beim Absenden nicht gesendet. Ein weiterer Unterschied ist, dass readonly Elemente fokussiert werden können (und fokussiert werden, wenn man durch ein Formular "tabbelt"), während disabled Elemente können das nicht.

Lesen Sie mehr darüber in dieser großartige Artikel o die Definition von w3c . Um den wichtigen Teil zu zitieren:

Wesentliche Unterschiede

Das Attribut Deaktiviert

• Werte für deaktivierte Formularelemente werden nicht an die Prozessormethode übergeben. Das W3C nennt dies ein erfolgreiches Element. (Dies funktioniert ähnlich wie bei Formular-Kontrollkästchen, die nicht angekreuzt sind.)
• Einige Browser können deaktivierte Formularelemente außer Kraft setzen oder mit einem Standard-Styling versehen. (Text ausgrauen oder einprägen) Internet Explorer 5.5 ist in dieser Hinsicht besonders unangenehm.
• Deaktivierte Formularelemente erhalten keinen Fokus.
• Deaktivierte Formularelemente werden in der Tabbing-Navigation übersprungen.

Das Nur-Lese-Attribut

• Nicht alle Formularelemente haben ein Readonly-Attribut. Am bemerkenswertesten ist das <SELECT> , <OPTION> und <BUTTON> Elemente haben keine Readonly Attribute (obwohl sie beide deaktivierte Attribute haben)
• Browser bieten keine standardmäßige, überschriebene visuelle Rückmeldung, dass das Formularelement schreibgeschützt ist. (Dies kann ein Problem sein siehe unten.)
• Formularelemente, bei denen das Attribut readonly gesetzt ist, werden an den Formularprozessor weitergeleitet.
• Nur lesbare Formularelemente können den Fokus erhalten
• Nur lesbare Formularelemente sind in der Registerkartennavigation enthalten.

Answer 2

Es werden keine Ereignisse ausgelöst, wenn das Element das Attribut "deaktiviert" hat.

Keiner der unten genannten Punkte wird ausgelöst.

$("[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

Während readonly ausgelöst wird.

$("[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

Answer 3

Deaktiviert bedeutet, dass keine Daten aus diesem Formularelement übermittelt werden, wenn das Formular abgeschickt wird. Schreibgeschützt bedeutet, dass alle Daten aus dem Element übermittelt werden, aber vom Benutzer nicht geändert werden können.

Zum Beispiel:

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

Dadurch wird der Wert "Bob" für das Element "IhrName" übermittelt.

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

Damit wird für das Element "IhrName" nichts übermittelt.

Answer 4

Das Gleiche wie bei den anderen Antworten (deaktiviert wird nicht an den Server gesendet, readonly schon), aber einige Browser verhindern die Hervorhebung eines deaktivierten Formulars, während read-only weiterhin hervorgehoben (und kopiert) werden kann.

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

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

Ein Nur-Lese-Feld kann nicht geändert werden. Ein Benutzer kann jedoch mit der Tabulatortaste darauf zugreifen, es markieren und den Text daraus kopieren.

Answer 5

Wenn der Wert eines deaktivierten Textfelds beibehalten werden soll, wenn ein Formular gelöscht (zurückgesetzt) wird, disabled = "disabled" muss verwendet werden, da das schreibgeschützte Textfeld den Wert nicht beibehält

Zum Beispiel:

HTML

Textfeld

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Reset-Taste

<button type="reset" id="clearButton">Clear</button>

Im obigen Beispiel wird der deaktivierte Textwert im Formular beibehalten, wenn die Schaltfläche Löschen gedrückt wird. Der Wert wird nicht beibehalten, wenn die input type = "text" readonly="readonly"