Dascontenteditableglobale Attribut ist ein aufgezähltes Attribut, das angibt, ob das Element vom Benutzer bearbeitet werden können soll. Wenn ja, ändert der Browser dessen Widget, um die Bearbeitung zu ermöglichen.

Probieren Sie es aus

<blockquote contenteditable="true">  <p>Edit this content to add your own quote</p></blockquote><cite contenteditable="true">-- Write your own name here</cite>

blockquote {  background: #eeeeee;  border-radius: 5px;  margin: 16px 0;}blockquote p {  padding: 15px;}cite {  margin: 16px 32px;  font-weight: bold;}blockquote p::before {  content: "\201C";}blockquote p::after {  content: "\201D";}[contenteditable="true"] {  caret-color: red;}

Wert

Das Attribut muss einen der folgenden Werte annehmen:

• true oder einleerer String, was anzeigt, dass das Element bearbeitbar ist.
• false, was anzeigt, dass das Element nicht bearbeitbar ist.
• plaintext-only, was anzeigt, dass der Rohtext des Elements bearbeitbar ist, aber Rich-Text-Formatierung deaktiviert ist.

Wenn das Attribut ohne einen Wert gegeben wird, wie<label contenteditable>Beispiel Label</label>, wird dessen Wert als leerer String behandelt.

Wenn dieses Attribut fehlt oder sein Wert ungültig ist, wird sein Wert vom Elternelementgeerbt: Das Element ist also bearbeitbar, wenn sein Elternelement bearbeitbar ist.

Beachten Sie, dass, obwohl die erlaubten Wertetrue undfalse umfassen, dieses Attribut einaufzählbares ist und keinBoolean.

Sie können die Farbe, die verwendet wird, um die Texteinfügemarke zu zeichnen, mit der CSS-Eigenschaftcaret-color festlegen.

Elemente, die durch das Verwenden descontenteditable Attributs bearbeitbar und damit interaktiv gemacht werden, können fokussiert werden. Sie nehmen an der sequentiellen Tastaturnavigation teil. Allerdings werden Elemente mit demcontenteditable Attribut, die innerhalb anderercontenteditable Elemente verschachtelt sind, standardmäßig nicht zur Tabulatorreihenfolge hinzugefügt. Sie können die verschachteltencontenteditable Elemente zur Tastaturnavigationsreihenfolge hinzufügen, indem Sie dentabindex Wert angeben (tabindex="0").

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

Beispiele

Inhalt incontenteditable einfügen

Dieses Beispiel hat zwei<div> Elemente mitcontenteditable, das erste mit dem Werttrue und das zweite mit dem Wertplaintext-only. Kopieren Sie den untenstehenden Inhalt und fügen Sie ihn in jedesdiv ein, um deren Auswirkungen zu sehen.

HTML

<h2>Content to copy</h2><p>  Copy all the text in the block below and paste it into each of the  contenteditable blocks to compare the results.</p><section>  <div>    <p>      This is a paragraph containing <strong>Bold</strong>, <em>Italic</em>, and      <span>red</span> text, followed by an ordered list:    </p>    <ol>      <li>Step one</li>      <li>Step two</li>      <li>Step three</li>    </ol>  </div></section>

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

h2 {  margin-bottom: 0;}.copying {  font-family: "Georgia", serif;  margin: 1rem;  padding: 1rem;  border: solid black 1px;}.red {  color: red;}.pasting {  display: flex;  flex-direction: row;  gap: 1rem;  width: 100%;  .wrapper {    flex: 1 1;    margin: 0;    padding: 0;  }  h3 {    font-family: monospace;  }  [contenteditable] {    min-height: 3rem;    border: solid 1px;    padding: 0.5rem;    background-color: whitesmoke;  }  [contenteditable="true"] {    caret-color: blue;  }  [contenteditable="plaintext-only"] {    caret-color: red;  }}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alleglobalen Attribute
• HTMLElement.contentEditable undHTMLElement.isContentEditable
• Die CSS-Eigenschaftcaret-color
• HTMLElementinput Ereignis