HTML-Attribut: readonly
Das Boolean-Attribut readonly, wenn es vorhanden ist, 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 auf einem Eingabe-Element (input) angegeben ist, nimmt das Element aufgrund der Tatsache, dass der Benutzer die Eingabe nicht bearbeiten kann, nicht an der Einschränkungsvalidierung teil.
Das readonly-Attribut wird von textuellen Formularelementen unterstützt, einschließlich:
<input>-Elemente des Typs:<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, aber nicht gesetzt haben, entsprechen der :read-write Pseudo-Klasse. Alle anderen Elemente entsprechen der :read-only Pseudo-Klasse.
Attribut-Interaktionen
Der Unterschied zwischen disabled und readonly ist, dass schreibgeschützte Steuerelemente weiterhin funktionieren und fokussierbar sind, während deaktivierte Steuerelemente keinen Fokus erhalten können und nicht mit dem Formular gesendet werden und im Allgemeinen nicht als Steuerelemente funktionieren, bis sie aktiviert werden.
Da ein schreibgeschütztes Feld seinen Wert nicht durch Benutzerinteraktion ändern kann, hat required keine Auswirkung auf Eingaben, bei denen das readonly-Attribut ebenfalls angegeben ist.
Die einzige Möglichkeit, den Wert des readonly-Attributs dynamisch zu ändern, ist durch ein Skript.
Hinweis:
Das required-Attribut ist bei Eingaben mit dem readonly-Attribut nicht erlaubt.
Benutzerfreundlichkeit
Browser zeigen das readonly-Attribut an.
Einschränkungsvalidierung
Wenn das Element schreibgeschützt ist, kann der Wert des Elements vom Benutzer nicht aktualisiert werden und nimmt nicht an der Einschränkungsvalidierung 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 # attr-input-readonly |
| HTML # attr-textarea-readonly |