`contenteditable` HTML globales Attribut

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das contenteditable globale Attribut ist ein aufgezähltes Attribut, das angibt, ob das Element vom Benutzer bearbeitet werden kann. Wenn ja, modifiziert der Browser sein Widget, um das Bearbeiten 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 ein leerer String, was bedeutet, dass das Element bearbeitbar ist.
false, was bedeutet, dass das Element nicht bearbeitbar ist.
plaintext-only, was bedeutet, dass der rohe Text des Elements bearbeitbar ist, aber das Formatieren von Rich Text deaktiviert ist.

Wenn das Attribut ohne Wert angegeben ist, wie <label contenteditable>Beispielbeschriftung</label>, wird sein Wert als leerer String betrachtet.

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

Beachten Sie, dass, obwohl seine erlaubten Werte true und false beinhalten, dieses Attribut ein aufgezähltes und kein Boolean-Attribut ist.

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

Elemente, die durch das contenteditable-Attribut bearbeitbar und somit interaktiv gemacht werden, können fokussiert werden. Sie nehmen an der sequentiellen Tastaturnavigation teil. Allerdings werden Elemente mit dem contenteditable-Attribut, die innerhalb anderer contenteditable-Elemente verschachtelt sind, standardmäßig nicht zur Tab-Sequenz hinzugefügt. Sie können die verschachtelten contenteditable-Elemente zur Tastaturnavigationssequenz hinzufügen, indem Sie den tabindex-Wert spezifizieren (tabindex="0").

Wenn Inhalte in ein Element mit contenteditable="true" eingefügt werden, bleibt die gesamte Formatierung erhalten. Wenn Inhalte in ein Element mit contenteditable="plaintext-only" eingefügt werden, wird die gesamte 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 deren Effekte zu sehen.

HTML

<h2>Content to copy</h2>
<p class="instructions">
  Copy all the text in the block below and paste it into each of the
  contenteditable blocks to compare the results.
</p>
<section class="copying">
  <div class="copy">
    <p>
      This is a paragraph containing <strong>Bold</strong>, <em>Italic</em>, and
      <span class="red">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>

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>

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;
  }
}