HTML `contenteditable` globales Attribut
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das contenteditable
globale 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 ein leerer 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 Elternelement geerbt: Das Element ist also bearbeitbar, wenn sein Elternelement bearbeitbar ist.
Beachten Sie, dass, obwohl die erlaubten Werte true
und false
umfassen, dieses Attribut ein aufzählbares ist und kein Boolean.
Sie können die Farbe, die verwendet wird, um die Texteinfügemarke zu zeichnen, mit der CSS-Eigenschaft caret-color
festlegen.
Elemente, die durch das Verwenden des contenteditable
Attributs bearbeitbar und damit 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 Tabulatorreihenfolge hinzugefügt. Sie können die verschachtelten contenteditable
Elemente zur Tastaturnavigationsreihenfolge hinzufügen, indem Sie den tabindex
Wert angeben (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
>Inhalt in contenteditable
einfügen
Dieses Beispiel hat 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 Auswirkungen zu sehen.
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> # attr-contenteditable> |
Browser-Kompatibilität
Loading…
Siehe auch
- Alle globalen Attribute
HTMLElement.contentEditable
undHTMLElement.isContentEditable
- Die CSS-Eigenschaft
caret-color
- HTMLElement
input
Ereignis