contenteditable

Das contenteditable globale Attribut ist ein aufgezähltes Attribut, das angibt, ob das Element vom Benutzer bearbeitbar sein soll. Falls ja, modifiziert der Browser sein Widget, um die Bearbeitung zu ermöglichen.

Probieren Sie es aus

Wert

Das Attribut muss einen der folgenden Werte haben:

  • true oder ein leerer String, was angibt, dass das Element bearbeitbar ist.
  • false, was anzeigt, dass das Element nicht bearbeitbar ist.
  • plaintext-only, was angibt, dass der Rohtext des Elements bearbeitbar ist, jedoch die Formatierung von Rich-Text deaktiviert ist.

Wenn das Attribut ohne Wert angegeben wird, wie in <label contenteditable>Beispiel Etikett</label>, wird sein Wert als leerer String behandelt.

Wenn dieses Attribut fehlt oder sein Wert ungültig ist, wird sein Wert von seinem übergeordneten Element geerbt: Das Element ist also bearbeitbar, wenn sein übergeordnetes Element bearbeitbar ist.

Beachten Sie, dass obwohl die erlaubten Werte true und false enthalten, dieses Attribut ein aufgezähltes und kein Boolesches Attribut ist.

Sie können die Farbe, die zum Zeichnen des Text-Einfügemarkens verwendet wird, mit der CSS-Eigenschaft caret-color festlegen.

Elemente, die mit dem Attribut contenteditable bearbeitbar und dadurch interaktiv gemacht werden, können fokussiert werden. Sie nehmen an der sequentiellen Tastaturnavigation teil. Allerdings werden Elemente mit dem contenteditable-Attribut, die in andere contenteditable-Elemente eingebettet sind, standardmäßig nicht in die Tabulator-Sequenz aufgenommen. Sie können die eingebetteten contenteditable-Elemente zur Tastatur-Navigationssequenz hinzufügen, indem Sie den tabindex-Wert angeben (tabindex="0").

Wenn Inhalt in ein Element mit contenteditable="true" eingefügt wird, bleibt die gesamte Formatierung erhalten. Wenn Inhalte in ein Element mit contenteditable="plaintext-only" eingefügt werden, wird alle Formatierung entfernt.

Beispiele

Inhalte in contenteditable einfügen

Dieses Beispiel enthält zwei <div>-Elemente mit contenteditable, das erste mit dem Wert true und das zweite mit dem Wert plaintext-only. Kopieren Sie den untenstehenden Inhalt und fügen Sie ihn in jedes div ein, um ihre Effekte zu sehen.

HTML

html
<h2>Pasting areas</h2>
<section class="pasting">
  <div class="wrapper">
    <h3>contenteditable="true"</h3>
    <div contenteditable="true"></div>
  </div>
  <div class="wrapper">
    <h3>contenteditable="plaintext-only"</h3>
    <div contenteditable="plaintext-only"></div>
  </div>
</section>

Spezifikationen

Specification
HTML Standard
# attr-contenteditable

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch