HTMLTextAreaElement.disabled — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.disabled

Beschreibung

Die Eigenschaft disabled spiegelt das gleichnamige boolesche HTML-Attribut eines <textarea>-Elements. Ist sie true, kann der Nutzer das Feld weder bearbeiten noch fokussieren, und es reagiert nicht auf Klicks. Setzt man die Eigenschaft per JavaScript, wird das Attribut disabled im DOM hinzugefügt bzw. entfernt.

Wichtig für Formulare: Der Wert eines deaktivierten Textfelds wird beim Absenden nicht übertragen und taucht auch in FormData nicht auf. Außerdem wird es bei der Validierung übersprungen (willValidate ist false). Soll der Inhalt nur schreibgeschützt sein, aber trotzdem gesendet werden, ist readOnly die richtige Wahl.

Ein <textarea> gilt auch dann als deaktiviert, wenn es in einem deaktivierten <fieldset> liegt (außer im ersten <legend>). Die Eigenschaft disabled des Elements selbst bleibt in diesem Fall jedoch false – den tatsächlichen Zustand prüft man zuverlässig mit element.matches(":disabled").

Typische Einsatzfälle: Eingaben während eines laufenden Speichervorgangs sperren, Felder abhängig von anderen Formularoptionen freischalten oder eine Nachricht nach dem Absenden sperren.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut disabled am Element gesetzt ist, sonst false. Zuweisbar: Jeder Wert wird in einen booleschen Wert umgewandelt.

Beispiele

Zustand lesen und umschalten

// <textarea id="kommentar" disabled></textarea>
const textarea = document.querySelector('#kommentar');

console.log(textarea.disabled); // true

textarea.disabled = false; // Feld freischalten
console.log(textarea.hasAttribute('disabled'));

true false

Feld während des Speicherns sperren

const form = document.querySelector('#feedback-form');
const textarea = form.querySelector('textarea[name="nachricht"]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Werte VOR dem Deaktivieren auslesen – sonst fehlen sie in FormData
  const daten = new FormData(form);
  textarea.disabled = true;
  try {
    await fetch('/api/feedback', { method: 'POST', body: daten });
    textarea.value = '';
  } catch (fehler) {
    console.error('Senden fehlgeschlagen:', fehler);
  } finally {
    textarea.disabled = false;
  }
});

Abhängig von einer Checkbox freischalten

// <input type="checkbox" id="sonstiges"> <textarea id="details" disabled></textarea>
const checkbox = document.querySelector('#sonstiges');
const details = document.querySelector('#details');

checkbox.addEventListener('change', () => {
  details.disabled = !checkbox.checked;
  if (!details.disabled) details.focus();
});

Deaktivierung durch ein Fieldset erkennen

// <fieldset disabled><textarea id="notiz"></textarea></fieldset>
const notiz = document.querySelector('#notiz');

console.log(notiz.disabled);            // eigenes Attribut
console.log(notiz.matches(':disabled')); // tatsächlicher Zustand

false true

// Wichtig · Fallstricke

Kein Formularversand: Deaktivierte Felder werden beim Absenden und in new FormData(form) ausgelassen. Wer den Wert trotzdem übertragen will, nutzt readOnly oder liest den Wert vor dem Deaktivieren aus.
Fieldset-Vererbung: disabled gibt nur das eigene Attribut wieder. Ob ein Vorfahr-<fieldset disabled> das Feld sperrt, zeigt nur :disabled bzw. matches(':disabled').
Barrierefreiheit: Deaktivierte Felder sind nicht per Tastatur erreichbar, und Screenreader überspringen sie oft. Wichtige Inhalte sollten daher nicht ausschließlich in deaktivierten Feldern stehen; alternativ aria-disabled="true" in Verbindung mit readOnly nutzen.
Keine Sicherheitsmaßnahme: Das Attribut lässt sich über die Entwicklerwerkzeuge entfernen – Eingaben immer serverseitig prüfen.
Deaktivierte Elemente lösen keine Maus-Ereignisse wie click aus; die Validierung überspringt sie (willValidate === false).
Kompatibilität: Wird von allen Browsern seit jeher unterstützt.

Siehe auch

Element.matches() HTMLTextAreaElement.dirName HTMLTextAreaElement.labels HTMLTextAreaElement.name HTMLTextAreaElement.required