HTML-Attribut: readonly
Das Boolean-Attribut readonly, wenn vorhanden, macht das Element nicht veränderbar, was bedeutet, dass der Benutzer das Steuerelement 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 für ein Eingabeelement angegeben ist, da der Benutzer die Eingabe nicht bearbeiten kann, nimmt das Element nicht an der Constraint-Validierung teil.
Das readonly-Attribut wird von textbasierten Formularelementen unterstützt, einschließlich:
<input>-Elemente des Typs:<textarea>
Das Attribut ist für alle anderen Elemente irrelevant, einschließlich <select> und <button>. Es gilt auch nicht für nicht-textuelle Eingabeelemente, einschließlich:
Eingaben, die das readonly-Attribut unterstützen, aber das Attribut nicht gesetzt haben, stimmen mit der :read-write-Pseudoklasse überein. Alle anderen Elemente stimmen mit der :read-only-Pseudoklasse überein.
Attributinteraktionen
Der Unterschied zwischen disabled und readonly besteht darin, dass schreibgeschützte Steuerelemente weiterhin funktionieren und fokussierbar sind, während deaktivierte Steuerelemente keinen Fokus erhalten können, nicht mit dem Formular übermittelt werden und im Allgemeinen nicht als Steuerelemente funktionieren, bis sie aktiviert sind.
Da ein schreibgeschütztes Feld seinen Wert nicht durch Benutzerinteraktion ändern kann, hat required keine Auswirkungen auf Eingaben, bei denen das readonly-Attribut ebenfalls angegeben ist.
Die einzige Möglichkeit, den Wert des readonly-Attributs dynamisch zu ändern, erfolgt über ein Skript.
Hinweis:
Das required-Attribut ist bei Eingaben, für die das readonly-Attribut angegeben ist, nicht zulässig.
Benutzerfreundlichkeit
Browser zeigen das readonly-Attribut an.
Constraint-Validierung
Wenn das Element schreibgeschützt ist, kann der Wert des Elements nicht vom Benutzer aktualisiert werden und nimmt nicht an der Constraint-Validierung 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
| Specification |
|---|
| HTML # attr-input-readonly |
| HTML # attr-textarea-readonly |