HTML contenteditable-Attribut
Das contenteditable-Attribut legt fest, ob der Inhalt eines Elements bearbeitbar ist. Werte, JavaScript-Handling und Barrierefreiheit.
Das HTML-Attribut contenteditable legt fest, ob der Inhalt eines Elements direkt im Browser bearbeitbar ist. Wenn Sie es aktivieren, kann der Benutzer in das Element klicken und Text eingeben, löschen und formatieren – ganz wie in einem Textverarbeitungsprogramm – ohne <input> oder <textarea>.
Da es auf nahezu jedem Element funktioniert, kann contenteditable ein <div>, ein <p> oder einen ganzen Abschnitt in eine Bearbeitungsoberfläche verwandeln. Es gehört zu den Global Attributes und steht daher auf jedem HTML-Element zur Verfügung.
Wann sollte contenteditable verwendet werden?
contenteditable ist die Grundlage für die seiteninteraktive Bearbeitung. Sie finden es hinter:
- Rich-Text-Editoren (die „WYSIWYG"-Felder in CMS-Systemen, E-Mail-Clients und Kommentarformularen). Im Gegensatz zu einem
<textarea>kann ein bearbeitbares Element echtes HTML enthalten – fett formatierten Text, Links, Listen und Bilder –, sodass der Benutzer die formatierte Ausgabe direkt beim Tippen sieht. - Inline-Bearbeitung – ein Benutzer klickt auf eine Überschrift oder Tabellenzelle, um sie an Ort und Stelle umzubenennen, anstatt ein separates Formular zu öffnen.
- Live-Vorschau- und Notizoberflächen, bei denen der Bearbeitungsbereich gleichzeitig das gerenderte Ergebnis ist.
Verwenden Sie <textarea> oder <input>, wenn Sie nur reinen Text benötigen, der mit einem Formular übermittelt wird: Sie sind echte Formularfelder, validieren und übertragen ihren Wert automatisch. Greifen Sie auf contenteditable zurück, wenn Sie formatierten (HTML-)Inhalt benötigen oder die Bearbeitung innerhalb des bestehenden Seitenlayouts stattfinden soll.
Syntax
<tag contenteditable="true">...</tag>Das Attribut akzeptiert die folgenden Werte:
| Wert | Bedeutung |
|---|---|
true (oder "") | Das Element ist bearbeitbar. Eine leere Zeichenkette verhält sich genauso wie true. |
false | Das Element ist nicht bearbeitbar. |
inherit | Das Element übernimmt seinen Bearbeitungsstatus vom nächsten Elternelement. Dies ist auch der Standard, wenn das Attribut weggelassen wird. |
plaintext-only | Das Element ist bearbeitbar, aber Rich-Text-Formatierung ist deaktiviert – es wird nur reiner Text akzeptiert. Wird von modernen Browsern unterstützt, sollte aber vor der Verwendung auf Kompatibilität geprüft werden. |
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p contenteditable="false">
This is a paragraph. It is not editable.
</p>
<p contenteditable="true">
This is a paragraph. It is editable. Try to change this text.
</p>
</body>
</html>Vererbung mit dem inherit-Wert
Wenn Sie contenteditable nicht für ein Kindelement setzen, erbt es den Bearbeitungsstatus seines Elternelements. Sie können eine gesamte Region beim Elternelement als bearbeitbar definieren und anschließend ein bestimmtes Kindelement mit contenteditable="false" wieder ausschließen:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable inherit example</title>
</head>
<body>
<div contenteditable="true">
<p>This paragraph inherits editing from the div, so you can change it.</p>
<p contenteditable="false">
This paragraph opts out — it is locked and cannot be edited.
</p>
<p contenteditable="inherit">
This one explicitly inherits, so it is editable again.
</p>
</div>
</body>
</html>Bearbeiteten Inhalt mit JavaScript lesen und speichern
Ein contenteditable-Element ist kein Formularfeld, daher wird sein Wert nicht mit einem Formular übermittelt, und es gibt keine value-Eigenschaft. Stattdessen lesen Sie den Inhalt direkt aus dem Element aus:
element.innerHTML– der bearbeitete Inhalt als HTML (behält Fettformatierung, Links, Listen).element.textContent– der bearbeitete Inhalt als reiner Text (Formatierung wird entfernt).
Um auf Bearbeitungen in Echtzeit zu reagieren, hören Sie auf das input-Ereignis, das bei jeder Änderung ausgelöst wird:
<!DOCTYPE html>
<html>
<head>
<title>Save editable content</title>
</head>
<body>
<div id="editor" contenteditable="true">
Edit me, then reload the page.
</div>
<script>
const editor = document.getElementById("editor");
// Restore any previously saved content.
const saved = localStorage.getItem("note");
if (saved !== null) {
editor.innerHTML = saved;
}
// Save on every edit.
editor.addEventListener("input", () => {
localStorage.setItem("note", editor.innerHTML);
// In a real app you would debounce this and POST it to a server, e.g.
// fetch("/api/save", { method: "POST", body: editor.innerHTML });
});
</script>
</body>
</html>Das Speichern von innerHTML direkt auf einem Server speichert rohes HTML. Bereinigen Sie nicht vertrauenswürdiges HTML immer serverseitig (oder mit einer geprüften Client-Bibliothek), bevor Sie es speichern oder erneut anzeigen, um Cross-Site-Scripting (XSS) zu verhindern.
Barrierefreiheit
Ein einfaches contenteditable-Element sieht zwar bearbeitbar aus, stellt aber im Gegensatz zu einem echten Formularfeld keine Feldsemantik für assistive Technologien bereit – Screenreader geben es möglicherweise nicht als ein Feld an, in das der Benutzer tippen kann. Wenn Sie einen eigenen Editor erstellen, helfen Sie ihnen:
- Fügen Sie
role="textbox"hinzu, damit es als bearbeitbares Textfeld angekündigt wird. Fügen Siearia-multiline="true"hinzu, wenn es mehrere Zeilen akzeptiert. - Fügen Sie ein
aria-labelhinzu (oder verknüpfen Sie ein sichtbares<label>überaria-labelledby), damit das Feld einen zugänglichen Namen hat. - Fügen Sie
tabindex="0"hinzu, wenn das Element nicht von Natur aus fokussierbar ist, damit Tastaturbenutzer es erreichen können.
<div
contenteditable="true"
role="textbox"
aria-multiline="true"
aria-label="Comment"
tabindex="0"
>
Type your comment…
</div>Browserunterschiede
contenteditable ist leistungsstark, verhält sich jedoch nicht in allen Browsern einheitlich – das ist der Hauptgrund, warum Produktionsanwendungen in der Regel auf einer Bibliothek aufbauen (oder plaintext-only verwenden) und nicht auf rohem contenteditable:
- Die Enter-Taste erzeugt unterschiedliches Markup. Das Drücken von Enter kann eine neue Zeile in einem
<div>, einem<p>oder mit einem<br>umbrechen, je nach Browser. Verlassen Sie sich nicht auf eine bestimmte erzeugte HTML-Struktur. - Beim Einfügen werden häufig Stile und Tags aus der Quelle mitgebracht; Sie müssen möglicherweise das
paste-Ereignis abfangen und den Inhalt bereinigen. plaintext-onlydeaktiviert die Rich-Text-Formatierung, wird aber nicht überall unterstützt – prüfen Sie die Verfügbarkeit per Feature-Detection, bevor Sie sich darauf verlassen.
Verwandte Attribute
spellcheck– aktiviert oder deaktiviert die Rechtschreibprüfung des Browsers innerhalb eines bearbeitbaren Bereichs.draggable– steuert, ob ein Element gezogen werden kann.- Global Attributes – die vollständige Liste der Attribute, die auf jedem Element verwendet werden können.