HTMLElement.isContentEditable — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLElement.isContentEditable

Beschreibung

Die schreibgeschützte Eigenschaft isContentEditable liefert true, wenn der Benutzer den Inhalt des Elements tatsächlich bearbeiten kann. Andernfalls liefert sie false. Anders als contentEditable, das nur den eigenen Attributwert als Zeichenkette zurückgibt ("true", "false", "plaintext-only" oder "inherit"), zeigt isContentEditable den berechneten Zustand. Dabei zählen geerbte Bearbeitbarkeit von Vorfahren und document.designMode mit.

Nützlich ist die Eigenschaft vor allem in Editoren und bei Tastaturkürzeln. Sie beantwortet die Frage „Tippt der Benutzer gerade in einen bearbeitbaren Bereich?“. So lassen sich globale Tastenkürzel wie j/k zur Navigation unterdrücken, solange in einem Rich-Text-Bereich geschrieben wird.

Formularfelder wie <input> und <textarea> sind zwar bearbeitbar, liefern aber false. Ihre Bearbeitbarkeit kommt nicht aus contenteditable. Für eine vollständige Prüfung „Ist das ein Eingabeziel?“ musst du diese Elemente deshalb gesondert abfragen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Inhalt des Elements bearbeitbar ist (eigenes oder geerbtes contenteditable, plaintext-only oder designMode), sonst false.

Beispiele

Geerbte Bearbeitbarkeit abfragen

document.body.innerHTML = `
  <div id="editor" contenteditable="true">
    <p id="absatz">Text</p>
    <span id="gesperrt" contenteditable="false">fix</span>
  </div>`;

const absatz = document.getElementById('absatz');
const gesperrt = document.getElementById('gesperrt');

console.log(absatz.contentEditable);     // eigener Attributwert
console.log(absatz.isContentEditable);   // berechneter Zustand
console.log(gesperrt.isContentEditable);

inherit true false

Globale Tastenkürzel in Editoren unterdrücken

const istEingabeziel = (el) =>
  el instanceof HTMLElement &&
  (el.isContentEditable ||
    el.matches('input, textarea, select'));

document.addEventListener('keydown', (event) => {
  if (istEingabeziel(event.target)) return; // Benutzer tippt gerade
  if (event.key === '/') {
    event.preventDefault();
    document.querySelector('#suche')?.focus();
  }
});

Bearbeitungsmodus umschalten und prüfen

const artikel = document.createElement('article');
artikel.textContent = 'Entwurf';
document.body.append(artikel);

const umschalten = () => {
  artikel.contentEditable = artikel.isContentEditable ? 'false' : 'true';
  console.log('Bearbeitbar:', artikel.isContentEditable);
};

umschalten();
umschalten();

Bearbeitbar: true Bearbeitbar: false

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an isContentEditable bleibt ohne Wirkung und wirft im Strict Mode einen TypeError. Zum Ändern verwendest du contentEditable oder das Attribut contenteditable.
<input> und <textarea> liefern false, obwohl der Benutzer darin schreiben kann.
Der Wert hängt vom DOM-Kontext ab. Ein Element, das noch nicht ins Dokument eingehängt ist, kann eine geerbte Bearbeitbarkeit nicht erkennen. Bei eingeschaltetem document.designMode = 'on' liefern alle Elemente des Dokuments true.
Die Eigenschaft gibt es nur auf HTMLElement. SVG-Elemente (SVGElement) haben sie nicht und liefern undefined.
Browserunterstützung: Alle modernen Browser unterstützen die Eigenschaft seit Langem. Der Wert plaintext-only ist erst seit 2025 Baseline, Firefox unterstützt ihn ab Version 136.
Sicherheit: Bearbeitbare Bereiche können über Einfügen eigenes HTML aufnehmen. Wenn du innerHTML aus einem solchen Bereich speicherst oder anzeigst, bereinige es serverseitig, zum Beispiel mit einem HTML-Sanitizer. Sonst drohen XSS-Angriffe.

Siehe auch

HTMLElement.contentEditable Document.designMode HTMLElement.inputMode HTMLElement PerformanceTiming.domContentLoadedEventEnd