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

433

Ich habe ein wenig darüber gelesen, aber ich kann anscheinend nichts Festes darüber finden, wie verschiedene Browser Dinge behandeln.

html cross-browser Andy
quelle
Verwandte: "Wie emuliere ich das schreibgeschützte Attribut für ein Select-Tag und erhalte trotzdem die POST-Daten?" stackoverflow.com/questions/368813/…
Adrien Be

Antworten:

726

Ein readonlyElement kann einfach nicht bearbeitet werden, sondern wird gesendet, wenn das entsprechende Element gesendet wird form. EINdisabled Element kann nicht bearbeitet werden und wird beim Senden nicht gesendet. Ein weiterer Unterschied besteht darin, dass readonlyElemente fokussiert werden können (und fokussiert werden, wenn Sie durch ein Formular "tippen"), während disabledElemente dies nicht können.

Lesen Sie mehr darüber in diesem großartigen Artikel oder in der Definition von w3c . Um den wichtigen Teil zu zitieren:

Hauptunterschiede

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 Kontrollkästchen, die nicht aktiviert sind.)
  • Einige Browser überschreiben möglicherweise Standardstile für deaktivierte Formularelemente oder bieten diese an. (Vergrauen oder Prägen von Text) Internet Explorer 5.5 ist diesbezüglich besonders unangenehm.
  • Deaktivierte Formularelemente erhalten keinen Fokus.
  • Deaktivierte Formularelemente werden in der Tabulatornavigation übersprungen.

Das schreibgeschützte Attribut

  • Nicht alle Formularelemente haben ein schreibgeschütztes Attribut. Am bemerkenswertesten, die <SELECT>, <OPTION>und<BUTTON> Elemente keine Read - only - Attribute (obwohl sie beide deaktiviert Attribute)
  • Browser bieten keine standardmäßig überschriebene visuelle Rückmeldung, dass das Formularelement schreibgeschützt ist. (Dies kann ein Problem sein ... siehe unten.)
  • Formularelemente mit dem Attribut readonly werden an den Formularprozessor übergeben.
  • Schreibgeschützte Formularelemente können den Fokus erhalten
  • Schreibgeschützte Formularelemente sind in der Navigation mit Registerkarten enthalten.
oezi
quelle
5
Bei schreibgeschütztem Element können Sie STRG + C nicht verwenden, aber Sie können mit der rechten Maustaste klicken und Kopieren auswählen.
Rumplin
7
@Rumplin bist du dir da sicher? Ich habe gerade getestet und konnte mit der Tastenkombination in Chrome unter OS X
kopieren.
5
"Nicht alle Formularelemente haben ein schreibgeschütztes Attribut. Am bemerkenswertesten ist, dass die Elemente <SELECT>, <OPTION> und <BUTTON> keine schreibgeschützten Attribute haben (obwohl beide Attribute deaktiviert haben)." Deshalb müssen Sie manchmal das Attribut "deaktiviert" mit einem ausgeblendeten Eingabefeld für ausgewählte Formulare verwenden.
Donato
In der aktuellen Version von Chrome können schreibgeschützte Elemente keinen Fokus erhalten. Dies ist problematisch, wenn Sie erwarten, dass Benutzer durch Werte scrollen können, die länger als die Größe der Eingabe sind.
Mike Feltman
5
Es ist also mein Verständnis, das disabled impliziert readonly , readonlyaber nicht impliziert disabled. Mit anderen Worten, wenn ein Element das disabledAttribut hat, muss das Attribut nicht ebenfalls enthalten sein readonly. Richtig?
Chharvey
91

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

Keiner der folgenden 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 schreibgeschützt wird ausgelöst.

$("[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
Hrishabh Gupta
quelle
34

Deaktiviert bedeutet, dass beim Senden des Formulars keine Daten von diesem Formularelement gesendet werden. Schreibgeschützt bedeutet, dass alle Daten aus dem Element gesendet 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 "yourname" übergeben.

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

Dies wird nichts für das Element "Ihr Name" senden.

Michael Irigoyen
quelle
6
Beide readonlyund disabledsind boolesche Werte. Verwenden Sie disabledanstelle von disabled="disabled"(gleich für readonly)
Raptor
5
Beide sind semantisch korrekt. Mit HTML5 können Sie beides verwenden.
Michael Irigoyen
3
Eine kontextfreie Ermahnung, nur die Attributnamen ohne Werte zu verwenden, ist nicht ratsam, da der Code dann kein gültiges XML / XHTML ist. Ich weiß, dass viele Entwickler sich nicht um diese kümmern, aber sie sollten sich zumindest der Gefahr bewusst sein. Persönlich bemühe ich mich um XHTML-Konformität - sofern nicht ein zwingender Grund angegeben ist, den ich noch nicht erhalten habe -, daher verwende ich das lange / duplizierte Formular.
underscore_d
1
@ToolmakerSteve Haben Sie eine Spezifikation, dass leere Zeichenfolgen gültiges XHTML sind? Ich kann nur Kommentarseiten finden, die besagen, dass es für HTML5 gültig ist. Alle, die ich über XHTML gesprochen habe, sagen, dass die Form für boolesche Attribute sein muss attrname="attrname". Auf jeden Fall scheint es nicht besonders gut dokumentiert zu sein, zumindest nicht, dass ich es finden kann. Nun, es gibt dies - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - aber es erwähnt nur speziell SGML und HTML, nicht XHTML ... zu viele Akronyme: S
underscore_d
1
... aber das Bit für HTML überspringen, wo Anwesenheit / Abwesenheit ausreichend ist - wir bekommen dies, was vermutlich durch Auslassen von XHTML gilt: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").Die leere Zeichenfolge scheint also nicht gültig zu sein.
underscore_d
4

Wie die anderen Antworten (deaktiviert wird nicht an den Server gesendet, schreibgeschützt), aber einige Browser verhindern das Hervorheben eines deaktivierten Formulars, während schreibgeschützt 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 schreibgeschütztes Feld kann nicht geändert werden. Ein Benutzer kann jedoch darauf zugreifen, es markieren und den Text daraus kopieren.

Tim
quelle
1

Wenn der Wert eines deaktivierten Textfelds beim Löschen eines Formulars (Zurücksetzen) beibehalten werden muss, disabled = "disabled"muss es 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-Knopf

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

Wenn im obigen Beispiel die Schaltfläche Löschen gedrückt wird, bleibt der deaktivierte Textwert im Formular erhalten. Der Wert wird im Fall von nicht beibehalteninput type = "text" readonly="readonly"

Syed
quelle