readonly HTML-Attribut
Das Boolesche readonly-Attribut macht das Element, falls vorhanden, unveränderlich, was bedeutet, dass der Benutzer die Steuerung nicht bearbeiten kann.
Probieren Sie es aus
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" value="Adam" />
<label for="age">Age:</label>
<input id="age" name="age" type="number" value="42" readonly />
<label for="hobbies">Hobbies:</label>
<textarea id="hobbies" name="hobbies" readonly>Baseball</textarea>
label {
display: block;
margin-top: 1em;
}
input:read-only,
textarea:read-only {
background-color: silver;
}
Überblick
Wenn das readonly-Attribut bei einem Eingabeelement angegeben ist, nimmt das Element aufgrund der Tatsache, dass der Benutzer die Eingabe nicht bearbeiten kann, nicht an der Beschränkungsvalidierung teil.
Das readonly-Attribut wird von textuellen Formular-Steuerelementen unterstützt, einschließlich:
<input>-Elementen vom Typ:<textarea>
Das Attribut ist für alle anderen Elemente, einschließlich <select> und <button>, nicht relevant. Es gilt auch nicht für nicht-textuelle Eingabeelemente, einschließlich:
Eingaben, die das readonly-Attribut unterstützen, bei denen das Attribut jedoch nicht gesetzt ist, entsprechen der :read-write-Pseudoklasse. Alle anderen Elemente entsprechen der :read-only-Pseudoklasse.
Attributinteraktionen
Der Unterschied zwischen disabled und readonly besteht darin, dass schreibgeschützte Steuerelemente weiterhin funktionieren und fokussierbar sind, wohingegen deaktivierte Steuerelemente nicht fokussierbar sind und nicht mit dem Formular übermittelt werden und im Allgemeinen nicht als Steuerelemente funktionieren, bis sie aktiviert sind.
Da ein schreibgeschütztes Feld nicht durch eine Benutzerinteraktion geändert werden kann, hat das Attribut required keine Auswirkungen auf Eingaben mit dem ebenfalls angegebenen readonly-Attribut.
Die einzige Möglichkeit, 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.
Beschränkungsvalidierung
Wenn das Element schreibgeschützt ist, kann der Wert des Elements nicht vom Benutzer aktualisiert werden und es nimmt nicht an der Beschränkungsvalidierung teil.
Beispiel
HTML
<div class="group">
<input type="text" value="Some value" readonly id="text" />
<label for="text">Text box</label>
</div>
<div class="group">
<input type="date" value="2020-01-01" readonly id="date" />
<label for="date">Date</label>
</div>
<div class="group">
<input type="email" value="Some value" readonly id="email" />
<label for="email">Email</label>
</div>
<div class="group">
<input type="password" value="Some value" readonly id="pwd" />
<label for="pwd">Password</label>
</div>
<div class="group">
<textarea readonly id="ta">Some value</textarea>
<label for="ta">Message</label>
</div>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # attr-input-readonly |
| HTML # attr-textarea-readonly |