HTMLTextAreaElement.readOnly — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.readOnly

Beschreibung

Die Eigenschaft readOnly von HTMLTextAreaElement spiegelt das HTML-Attribut readonly wider. Ist sie true, kann der Benutzer den Text im Feld nicht ändern. Er kann ihn aber weiterhin markieren, kopieren und mit der Tastatur ansteuern (fokussieren). Setzt man die Eigenschaft auf true, fügt der Browser das Attribut hinzu, bei false entfernt er es.

Der wichtigste Unterschied zu disabled: Ein schreibgeschütztes Feld wird beim Absenden des Formulars mitgeschickt und bleibt fokussierbar. Ein deaktiviertes Feld wird dagegen nicht übertragen und lässt sich nicht fokussieren. readOnly passt deshalb gut für Werte, die der Benutzer sehen und mitsenden, aber nicht ändern soll. Beispiele sind generierte Texte, Lizenzbedingungen oder Inhalte, die gerade gespeichert werden.

Schreibgeschützte Felder werden von der Constraint Validation ausgenommen (barred from constraint validation). Ein required-Feld, das gleichzeitig readOnly ist, blockiert das Absenden also nicht. Per Skript lässt sich der Wert über textarea.value jederzeit ändern. Der Schreibschutz gilt nur für Eingaben durch den Benutzer.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` macht das Feld schreibgeschützt, `false` hebt den Schutz auf. Andere Werte werden in einen booleschen Wert umgewandelt (truthy/falsy).

Rückgabewert

Typ

boolean

Beschreibung

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

Beispiele

Schreibschutz abfragen und umschalten

// HTML: <textarea id="notiz" readonly>Nur lesen</textarea>
const notiz = document.querySelector('#notiz');

console.log(notiz.readOnly); // true

notiz.readOnly = false;
console.log(notiz.hasAttribute('readonly')); // false

true false

Feld während des Speicherns sperren

const editor = document.querySelector('#kommentar');
const saveBtn = document.querySelector('#speichern');

saveBtn.addEventListener('click', async () => {
  editor.readOnly = true;   // Eingabe sperren, Wert bleibt sichtbar
  saveBtn.disabled = true;
  try {
    await fetch('/api/kommentar', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: editor.value })
    });
  } finally {
    editor.readOnly = false;  // wieder freigeben
    saveBtn.disabled = false;
  }
});

Bearbeiten-Modus per Checkbox

// HTML: <label><input type="checkbox" id="edit"> Bearbeiten</label>
//       <textarea id="bio" readonly>Mein Profiltext</textarea>
const toggle = document.querySelector('#edit');
const bio = document.querySelector('#bio');

toggle.addEventListener('change', () => {
  bio.readOnly = !toggle.checked;
  if (!bio.readOnly) bio.focus();
});

readOnly vs. disabled beim Absenden

// HTML: <form id="f">
//   <textarea name="a" readonly>A</textarea>
//   <textarea name="b" disabled>B</textarea>
// </form>
const data = new FormData(document.querySelector('#f'));
console.log([...data.keys()]);

["a"]

// Wichtig · Fallstricke

Kein Sicherheitsmerkmal: readOnly lässt sich über die Entwicklerwerkzeuge leicht entfernen. Werte, die nicht verändert werden dürfen, müssen immer auf dem Server geprüft werden.
Skripte können value weiterhin ändern. Der Schreibschutz gilt nur für Benutzereingaben.
Schreibgeschützte Felder werden von der Formularvalidierung ausgenommen: required hat dann keine Wirkung, und willValidate ist false.
Mit der CSS-Pseudoklasse :read-only bzw. :read-write lassen sich solche Felder gezielt gestalten. Der Browser zeigt ein schreibgeschütztes Feld oft nicht sichtbar anders an, daher ist ein eigenes Styling sinnvoll.
Die Schreibweise ist readOnly mit großem O. textarea.readonly setzt nur eine neue, wirkungslose JS-Eigenschaft.
Die Eigenschaft wird in allen modernen Browsern seit Langem unterstützt.

Siehe auch

ElementInternals.ariaReadOnly HTMLTextAreaElement.cols HTMLTextAreaElement.labels HTMLTextAreaElement.required HTMLTextAreaElement.rows