HTMLInputElement.readOnly — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.readOnly

Beschreibung

Die Eigenschaft readOnly spiegelt das boolesche HTML-Attribut readonly eines <input>-Elements wider. Bei true kann der Benutzer den Wert nicht ändern. Das Feld lässt sich aber weiterhin fokussieren, der Text kann markiert und kopiert werden, und das Feld ist per Tabulator erreichbar.

Der wichtigste Unterschied zu disabled: Ein schreibgeschütztes Feld wird beim Absenden des Formulars mitgeschickt und nimmt an der Constraint Validation nicht teil (willValidate ist false). Ein deaktiviertes Feld wird dagegen weder gesendet noch fokussiert. readOnly passt daher gut für berechnete oder vom Server vorgegebene Werte, die der Benutzer sehen und mitsenden, aber nicht ändern soll, zum Beispiel eine Bestellnummer oder einen Gesamtpreis.

Das Setzen der Eigenschaft fügt das Attribut readonly hinzu oder entfernt es. Per Skript lässt sich value trotzdem jederzeit ändern, denn der Schreibschutz gilt nur für Eingaben des Benutzers.

Das Attribut wirkt nur bei textartigen Typen und Datums-/Zahlentypen: text, search, url, tel, email, password, date, month, week, time, datetime-local und number. Bei checkbox, radio, range, color, file und Buttons wird es ignoriert.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Nur beim Schreiben: `true` setzt das Attribut `readonly`, `false` entfernt es. Andere Werte werden in einen booleschen Wert umgewandelt (Truthy/Falsy).

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut readonly vorhanden ist, sonst false.

Beispiele

Schreibschutz abfragen und umschalten

// HTML: <input id="kundennr" value="K-4711" readonly>
const feld = document.querySelector('#kundennr');

console.log(feld.readOnly);                // true
feld.readOnly = false;                      // Bearbeitung erlauben
console.log(feld.hasAttribute('readonly')); // false

true false

„Bearbeiten“-Button für ein Profilfeld

// HTML: <input id="email" type="email" value="max@example.com" readonly>
//       <button id="edit">Bearbeiten</button>
const email = document.querySelector('#email');
const btn = document.querySelector('#edit');

btn.addEventListener('click', () => {
  email.readOnly = !email.readOnly;
  btn.textContent = email.readOnly ? 'Bearbeiten' : 'Fertig';
  if (!email.readOnly) {
    email.focus();
    email.select();
  }
});

Berechneten Wert anzeigen und mitsenden

// HTML: <form id="bestellung">
//   <input name="menge" type="number" value="2">
//   <input name="summe" readonly>
// </form>
const form = document.querySelector('#bestellung');
const { menge, summe } = form.elements;
const PREIS = 9.5;

const aktualisieren = () => {
  // Skripte dürfen value trotz readOnly setzen
  summe.value = (menge.valueAsNumber * PREIS).toFixed(2);
};
menge.addEventListener('input', aktualisieren);
aktualisieren();

// readOnly-Felder sind in den Formulardaten enthalten, disabled-Felder nicht
console.log(Object.fromEntries(new FormData(form)));

{ menge: "2", summe: "19.00" }

// Wichtig · Fallstricke

Kein Sicherheitsmerkmal: Der Schreibschutz lässt sich über die Entwicklerwerkzeuge oder manipulierte Anfragen leicht umgehen. Werte, die aus schreibgeschützten Feldern kommen, müssen auf dem Server immer geprüft werden.
readOnly vs. disabled: readOnly-Felder werden gesendet und sind fokussierbar, disabled-Felder nicht.
Keine Validierung: Bei schreibgeschützten Feldern werden required, pattern usw. nicht geprüft. Ein leeres required-Feld mit readonly blockiert das Absenden also nicht.
Nicht bei allen Typen wirksam: Bei checkbox, radio, range, color und file hat die Eigenschaft keine Wirkung. Hier hilft nur disabled oder ein eigenes Abfangen der Ereignisse.
Schreibweise: In JavaScript heißt die Eigenschaft readOnly (camelCase), das HTML-Attribut readonly. el.readonly = true legt nur eine neue, wirkungslose Eigenschaft an.
CSS: Schreibgeschützte Felder lassen sich mit der Pseudoklasse :read-only gestalten, bearbeitbare mit :read-write.
Wird in allen Browsern unterstützt. Auch HTMLTextAreaElement hat eine gleichnamige Eigenschaft.

Siehe auch

ElementInternals.ariaReadOnly HTMLInputElement.alt HTMLInputElement.labels HTMLInputElement.required HTMLInputElement.accept