nicht angemeldet
text aus textarea in die aktuelle Seite einbinden
Hallo liebe Selfhtmler,
Für die Vorschau, die direkt entsprechenden UBB-Code eines geschriebenen Textes umwandeln soll, der in einem <textarea> getippt wird, habe ich mir das Anzeigebeispiel von HTML-Elementobjekte
verwendet und meiner Seite anpassen wollen.
Hier bin ich auch im Forumsarchiv auf die wohl bekannte Problematik des Zeilenumbruchs bzw. das Einfügen von HTML-Tags gestoßen. Auch wenn der Beitrag etwas älter ist, würde ich doch gerne diese Diskussion fortführen/ausbauen.
Der Kern des Bespiels ist, folgender Code:
<script type="text/javascript">
<!--
function setText () {
document.getElementById("Text").firstChild.nodeValue = document.getElementById("Eingabe").value;
}
-->
</script>
<form name="Formular" action="">
<textarea id="Eingabe" rows="10" cols="50" onkeyup="setText()"></textarea>
</form>
<div id="Text" style="font-size:1.4em; background-color:#FFFFCC; padding:10px; border:solid 1px red"> </div>
</body></html>
Der Text aus <textarea> ("Eingabe") wird einem <div> mittels firstChild.nodeValue übermittelt.
Problem hierbei ist ja, wenn ich das richtig verstanden habe, dass ich nur reine Textabschnitte für den aktuellen Knoten weiterschicken kann. Möchte ich weitere Zeilen einfügen, muss ich jeweils für jeden Zeilenumbruch und Zeile einen neuen Knoten in dem <div> erstellen.
Da ich relativ lange und erfolglos nach einer Lösung im Internet gesucht habe, kam ich selber irgendwann auf die Idee, um HTML-Tags zu verwenden, die Syntax innerHTML zu verwenden. Ich habe meinen Code nun so abgeändert:
<script type="text/javascript">
<!--
function setText (quelle,ziel) {
var text = document.getElementById(quelle).value;
document.getElementById(ziel).innerHTML = changeUBB(text);
}
function changeUBB(text) {
text = text.replace(/\n/g,"<br />");
...
return text;
}
-->
</script>
<form><textarea id="text_form" name="text" onkeyup="setText('text_form','preview');"></textarea></form>
<div><span id="preview"> </span></div>
Die Lösung ist sehr trivial, zu trivial, dafür dass ich so lange nichts im Internet gefunden habe.
Mit dieser Konstruktion erhalte ich das gewünschte Ergebnis (nur mit Firefox und IE getestet), befürchte aber, da ich kein großer Javascriptkünstler bin, dass da noch was dran faul ist und möchte doch bitte eure Meinung dazu hören, ob Javascript-technisch alles korrekt ist und ob es so evtl. Komplikationen mit bestimmten Browsern geben könnte oder andere unerwartete Dinge passieren könnten.
LG
Sven Richter
-
Hallo Sven Richter,
Die Lösung ist sehr trivial
Das macht sie aber nicht schlechter, oder als andere oder? Wenn der Leitspruch: Alles was funktioniert, ist auch richtig! ist, dann hast Du 100 von 100 möglichen. Natürlich kannst Du es auch "komplizierter" machen und createelement() usw. nutzen.
dass da noch was dran faul ist und möchte doch bitte eure Meinung dazu hören, ob Javascript-technisch alles korrekt ist
Meiner Meinung nach ist es korrekt und ich hätte nichts auszusetzen.
und ob es so evtl. Komplikationen mit bestimmten Browsern geben könnte oder andere unerwartete Dinge passieren könnten.
JA, das könnte sein. Die getElement(s)By-Methoden sind noch nicht so alt, wie ich mich mal belehren lassen hab', als ich es /einfach/ verwendet habe... Du könntest sie zumindest vorher auf Kenntnis prüfen.
Mit freundlichem Gruß
Micha