HTML/Universalattribute/contenteditable

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Universalattribut contenteditable ermöglicht es, den Inhalt eines Elements zu editieren (verändern).

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Mögliche Werte sind:

  • true
  • false

Funktionsweise[Bearbeiten]

Diese Eigenschaft ist wie Drag & Drop aus dem Internet Explorer 5.5 und schrittweise von anderen Browsern übernommen und standardisiert worden.

Trotzdem haben sich noch einige Unterschiede bewahrt:

  • Bei einem Klick auf die Enter-Taste in Textabsätzen werden neue Absätze erzeugt. In Chrome und Opera wird nach einer Überschrift aber ein leeres Div eingefügt.
  • Firefox füllt eine leere Tabellenzelle mit <br type="_moz"> bzw. <br type="_moz"></br>. (Hier hilft es die Tabellenzellen mit einem &nbsp; zu füllen.)

Dies gilt es bei einem eventuellen Auslesen der geänderten Elemente über AjaX zu berücksichtigen.

Beispiel ansehen …
<div id="example-one" contenteditable>
  <p>Alles innerhalb dieses Divs kann angeklickt und verändert werden. Viel Spaß!</p>
  <p><img src="Hund.gif" alt="Hund ..."></p>  

<table>
  <tr>
    <th>Spalte 1</th><th>Spalte 2</th>
  </tr>
  <tr>
    <td></td><td></td>
  </tr>
  <tr>
    <td>&nbsp;  </td><td>&nbsp;  </td>
  </tr>
  <tr>
    <td></td><td><input type="number"></td>
  </tr>      
 </table> 
 
</div>
Das div erhält das Attribut contenteditable. Damit können Inhalt und auch seine Kindelemente beliebig geändert werden.
[contenteditable] { 
  padding: 1em; 
  margin:1em;
  outline: 2px dashed #CCC; 
  position: relative;
}

[contenteditable]:hover { 
  outline: 2px dashed #c32e04; 
}

[contenteditable]:after {
  position: absolute;
  content:'✏';
  right: 0em;
  top: 0em;
  font-size: 3em;
  transform: rotate(45deg);
}
Um die Editierbarkeit des Bereichs auch kenntlich zu machen, ändert sich die Farbe der outline, wenn das Feld active ist.

Benutzerfreundlichkeit[Bearbeiten]

Bei einem input-Element oder einer textarea greifen im Allgemeinen Standardverhalten und browsereigene Festlegungen Zahn in Zahn ineinander, sodass diese als Eingabeelemente erkannt werden.

Bei Elementen, die mit contenteditable ausgezeichnet wurden, muss die Funktionalität erst sichtbar gemacht werden. Deshalb sollte dies auch grafisch an das Aussehen dieser Eingabeelemente angepasst werden.

Anwendungsbeispiele[Bearbeiten]

CSS-Spielwiese: Style sichtbar machen[Bearbeiten]

Chris Coyier von css-tricks schlug 2012 vor, einen Absatz in eine Spielwiese zu verwandeln, indem ein zweiter style-Bereich im body des Dokuments mit display: block sichtbar und mit contenteditable editierbar gemacht wird:

Beispiel ansehen …
<p id="spielwiese">Dieser Absatz hat eine eindeutige id und enthält ein style-Element. Dieses legt eine blaue Schriftfarbe fest. 
<style contenteditable>
p#spielwiese {
	background: #e6f2f7;
	color: blue;
} 

style {
	display: block; 
	color: RebeccaPurple;
	font-family: monospace; 
	margin: 1em; 
	white-space: pre;
} 
</style> 
Außerdem wird der Inhalt des style-Elements angezeigt. Diesen können Sie durch das contenteditable-Attribut beliebig ändern.
</p>
Innerhalb des Absatzes mit der id spielwiese befindet sich Text und ein style-Element. Dieses enthält Festlegungen für die id spielwiese und für das style-Element im body, dessen browsereigene Einstellungen durch display: block überschrieben werden.

Im Validator wirft dieses Beispiel einen Fehler, da style-Elemente nur innerhalb des head erlaubt sind. Im Originalbeispiel wurde mit dem mittlerweile obsoleten scoped-Attribut gearbeitet, dass kein aktueller Browser unterstützt. Das style-element im body würde eventuelle CSS-Festlegungen aus dem head oder externe Stylesheets überschreiben.

HTML-Spielwiese[Bearbeiten]

„Das Seitenbeispiel ist ja ganz nett, aber wie sähe es denn mit mehr Inhalt aus?“ - Sie können Ihre Webseite während der Entwicklung so direkt ausprobieren und anpassen.

Beispiel ansehen …
<body contenteditable>
		<header>
			<h1>HTML-Spielwiese</h1>
  ...
</body>
Sie können die gesamte Seite beliebig ändern! Wenn Ihnen das Ergebnis gefällt, können Sie die HTML-Struktur aus dem Seiteninspektor kopieren.
In der Navigation können Sie durch Enter eine neues (unformatiertes) Listenelement einfügen oder mit copy & paste ein a-Element kopieren und dann den Linktext entsprechend anpassen.
Beachten Sie: Wenn Sie innerhalb des editierbaren Bereichs (z.B. durch ein contenteditable-Attribut innerhalb des body-Tags) Links notiert haben, sind diese aus Sicherheitsgründen nicht anklickbar!

Weblinks[Bearbeiten]