Seite manipulieren mit 'contentEditable' [IE|M|O|G]

von: Werner Zenk

Mit dem Attribut 'contentEditable' lassen sich einzelne Bereiche oder die gesamte Seite manipulieren. Die Manipulation ist nur virtuell, für alle anderen Benutzer verändert sich nichts.
Am besten funktioniert das im Mozilla Firefox und dem Internet Explorer.

Demo:

In einem kleinen Apfel, da sieht es niedlich aus; es sind darin fünf Stübchen, gerade wie in einem Haus. In jedem Stübchen wohnen zwei Kernchen, braun und klein; die liegen drin und träumen vom lieben Sonnenschein.

In diesem Demo lässt sich der Text nach belieben veändern (kopieren, ausschneiden, einfügen), außerdem kann das Bild an eine andere Stelle verschoben werden und die Bildgröße ist änderbar.

Quelltext:

<div contentEditable="true">
  <img src="apfel.gif"> In einem kleinen Apfel, da sieht es niedlich aus ...
</div>

• Manipulation mit JavaScript
Mit JavaScript kann man die virtuelle Änderung ein.- oder ausschalten.

Demo:

Quelltext:


<script type="text/javascript">
function bearbeiten() {
 if (document.getElementById("BUTTON").value == "Reihenfolge ändern") {
 document.getElementById("BUTTON").value = "Reihenfolge jetzt ändern";
 void(document.getElementById("ID").contentEditable = true);
 }
 else {
 document.getElementById("BUTTON").value = "Reihenfolge ändern";
 void(document.getElementById("ID").contentEditable = false);
 }
}
</script>

<div id="ID"
 style="background-color: #FFFFEA; width: 300px; padding: 10px;">
<img src="wuerfel/w3.gif">
<img src="wuerfel/w1.gif">
<img src="wuerfel/w2.gif">
<img src="wuerfel/w6.gif">
<img src="wuerfel/w5.gif">
<img src="wuerfel/w4.gif">
</div>
<br>
<input type="button" id="BUTTON" value="Reihenfolge ändern"
 onClick="bearbeiten()">

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

JavaScript-Ausgabe zeitlich steuern

Eingabe überprüfen

Bilder mit Sprechblasen - Diese JavaScript-Funktion zeigt Sprechblasen über Bilder an.

JavaScript Bausteine 1

Countdown - Anzeige der verbleibenden Stunden

Bildschirmgröße - Öffnet ein neues Fenster mit der größe Ihres Bildschirmes.

Formular nur mit Großbuchstaben

Checkboxen mit JavaScript überprüfen - Mit diesem JavaScript lassen sich Checkboxen (von unterschiedlicher Anzahl) überprüfen ob der Benutzer diese ausgewählt hat. …mehr