HTML-Attribut: readonly
Das boolesche readonly-Attribut sorgt dafür, dass das Element nicht veränderbar ist, was bedeutet, dass der Benutzer das Steuerungselement nicht bearbeiten kann.
Probieren Sie es aus
Überblick
Wenn das readonly-Attribut bei einem Eingabeelement angegeben ist, nimmt das Element nicht an der Constraints-Validierung teil, da der Benutzer die Eingabe nicht bearbeiten kann.
Das readonly-Attribut wird von den text, search, url, tel, email, password, date, month, week, time, datetime-local und number <input>-Typen und den Formularsteuerelementen <textarea> unterstützt. Wenn es bei einem dieser Eingabetypen und Elemente vorhanden ist, wird die :read-only Pseudoklasse übereinstimmen. Wenn das Attribut nicht enthalten ist, wird die :read-write Pseudoklasse übereinstimmen.
Das Attribut wird bei <select> oder Eingabetypen, die bereits unveränderlich sind, wie checkbox und radio, oder die definitionsgemäß nicht mit einem Wert beginnen können, wie der file Eingabetyp, nicht unterstützt oder ist nicht relevant. range und color haben beide Standardwerte. Es wird auch nicht bei hidden unterstützt, da es nicht erwartet werden kann, dass Benutzer ein verstecktes Formular ausfüllen. Ebenso wird es bei keinem der Button-Typen, einschließlich image, unterstützt.
Hinweis:
Nur Textsteuerungen können schreibgeschützt gemacht werden, da bei anderen Steuerungen (wie Kontrollkästchen und Schaltflächen) keine sinnvolle Unterscheidung zwischen schreibgeschützt und deaktiviert besteht. Das readonly-Attribut gilt daher nicht.
Wenn eine Eingabe das readonly-Attribut hat, gilt auch die :read-only Pseudoklasse dafür. Umgekehrt werden Eingaben, die das readonly-Attribut unterstützen, aber nicht gesetzt haben, mit der :read-write Pseudoklasse übereinstimmen.
Attribut-Interaktionen
Der Unterschied zwischen disabled und readonly besteht darin, dass schreibgeschützte Steuerungen weiterhin funktionieren und fokussierbar sind, während deaktivierte Steuerungen keinen Fokus erhalten können, nicht mit dem Formular gesendet werden und im Allgemeinen nicht als Steuerungen funktionieren, bis sie aktiviert werden.
Da ein schreibgeschütztes Feld seinen Wert nicht durch eine Benutzerinteraktion ändern kann, hat required keine Wirkung auf Eingaben, bei denen das readonly-Attribut auch angegeben ist.
Der einzige Weg, den Wert des readonly-Attributs dynamisch zu ändern, ist über ein Skript.
Hinweis:
Das required-Attribut ist bei Eingaben, die das readonly-Attribut spezifiziert haben, nicht zulässig.
Benutzerfreundlichkeit
Browser zeigen das readonly-Attribut an.
Constraints-Validierung
Wenn das Element schreibgeschützt ist, kann der Wert des Elements nicht vom Benutzer aktualisiert werden und nimmt nicht an der Constraints-Validierung teil.
Beispiel
HTML
<div class="group">
<input type="text" value="Some value" readonly="readonly" id="text" />
<label for="text">Text box</label>
</div>
<div class="group">
<input type="date" value="2020-01-01" readonly="readonly" id="date" />
<label for="date">Date</label>
</div>
<div class="group">
<input type="email" value="Some value" readonly="readonly" id="email" />
<label for="email">Email</label>
</div>
<div class="group">
<input type="password" value="Some value" readonly="readonly" id="pwd" />
<label for="pwd">Password</label>
</div>
<div class="group">
<textarea readonly="readonly" id="ta">Some value</textarea>
<label for="ta">Message</label>
</div>
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # attr-input-readonly |
| HTML Standard # attr-textarea-readonly |
Browser-Kompatibilität
html.elements.input.readonly
BCD tables only load in the browser
html.elements.textarea.readonly
BCD tables only load in the browser