HTML-Attribut: readonly
Das boolesche readonly-Attribut, 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;
}
Übersicht
Wenn das readonly-Attribut auf einem Eingabeelement angegeben ist, da der Benutzer die Eingabe nicht bearbeiten kann, nimmt das Element nicht an der Einschränkungsvalidierung teil.
Das readonly-Attribut wird von textuellen Formularelementen unterstützt, darunter:
<input>-Elemente vom Typ:<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, entsprechen der :read-write-Pseudoklasse. Alle anderen Elemente entsprechen der :read-only-Pseudoklasse.
Attribut-Interaktionen
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 erst wieder als Steuerelemente funktionieren, wenn sie aktiviert werden.
Da ein schreibgeschütztes Feld nicht durch eine Benutzerinteraktion geändert werden kann, hat required keine Auswirkungen auf Eingaben mit dem readonly-Attribut.
Der einzige Weg, den Wert des readonly-Attributs dynamisch zu ändern, ist über ein Skript.
Hinweis:
Das required-Attribut ist bei Eingaben mit dem readonly-Attribut nicht zulässig.
Benutzerfreundlichkeit
Browser zeigen das readonly-Attribut an.
Einschränkungsvalidierung
Wenn das Element schreibgeschützt ist, kann der Wert des Elements nicht vom Benutzer 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 |