Bei einem aktuellen Projekt benötigte ich eine Möglichkeit, bestimmte Inhalte einer Webseite zu Drucken. Dazu habe ich mir per JavaScript einen Bereich der Seite genommen, diesen geclont, ein neues Fenster geöffnet und dort den geclonten Bereich wieder eingefügt.
Falls sich in diesem geclonten Bereich interaktive Elemente wie Butons, Links oder Eingabefelder befanden, habe ich diese ebenfalls mittels JavaScript entfernt oder den Textinhalt der Eingabefelder bzw. Textareas kopiert und als Text an die gleiche Stelle wieder eingefügt. Als Ergebnis gibt es dann eine HTML Seite ohne Links und Buttons.
So weit so gut, aber da gibt es ein Problem, welches mir vorher noch nicht bewußt war und was ich auch noch nirgendwo dokumentiert sah. Wenn man im Firefox eine Textarea clont in welche der User zuvor noch Inhalte eingegeben hat, werden diese Inhalte nicht mitgeclont. Im Internet Explorer funktioniert dies richtig. Ich habe dazu mal eine Testseite erstellt, wo man dieses Verhalten nachprüfen kann. Getestet habe ich es zur Zeit nur im Firefox 1.5!
Ich werde mal weiter nachforschen, ob dies ein gewolltes Verhalten von den Firefox Entwicklern ist, oder ob es dafür schon Bugeinträge in Bugzilla gibt.
Interessantes Verhalten – ich nehme mal an, dass das am Element TEXTAREA liegt: Der Inhalt der Textarea steht ja als zwischen dem öffnenden und dem schließenden Tag, und nicht wie bei INPUT im Attribut value. Anders gesagt: Der Inhalt ist ein Kindknoten von TEXTAREA. Wird nun vom Anwender Text in die Textarea geschrieben, erweitert sich der DOM-Baum nicht – Textarea hat für das DOM schlicht keine Kinder. Und wo keine Kinder sind, können auch keine kopiert werden.
Schreibt man im HTML-Code Text zwischen öffnendes und schließendes TEXTAREA-Tag, besitzt die Textarea einen Kindknoten, der auch anstandslos mitkopiert wird. Allerdings nur der Text, der im HTML-Quellcode steht – Eingaben vom Anwender bleiben wieder außen vor, das DOM wird wieder nicht geändert.
Ich habe mal, weil ich es für ein interessantes Problem halte, den JavaScript-Code entsprechend erweitert…
function startClone(id, target, cloneChilds)
{
var sourceElement = document.getElementById(id);
var targetElement = document.getElementById(target);
if(sourceElement.nodeName==“TEXTAREA“) {
var content = document.createTextNode(sourceElement.value);
var klon = sourceElement.cloneNode(cloneChilds);
klon.appendChild(content);
targetElement.appendChild(klon);
}
else {
targetElement.appendChild(sourceElement.cloneNode(cloneChilds));
}
}
Seit wann gibt es den HTML5? Oder kommt die 5 Version erst noch raus?