Zeilenumbruch in <div> erzwingen

[DHK]

Hallo,

ich habe eine Frage bezüglich JavaScript. Ich habe in einem HTML-Skript eine <textarea>. Darunter befindet sich ein <div><span>. Mit dem Event-Handler onkeyup in der <textarea> rufe ich folgende Funktion auf:
function setText () {
    document.getElementById("text_span").firstChild.nodeValue = document.getElementById("Eingabe").value;
  }

Diese Funktion überträgt den eingegeben Inhalt der <textarea> auf den <div><span>. Problem: Drücke ich in der <textarea> Enter (sprich einen Zeilenumbruch) und schreibe in der nächsten Zeile weiter, so wird dieser Zeilenumbruch im <div><span> nicht gemacht. Hört sich kompliziert an, ich weiß. Ihr könnt es gerne selbst mal probieren: http://www.werbung-fuer-sie.de/express/src/letter.php?zoom=4

Gebt in dem Textfeld einfach mal was ein, drückt dann Enter und gebt wieder was ein. Ihr werdet sehen, dass im <div><span> kein Zeilenumbruch gemacht wird.

Ich habe schon SelfHTMl durchforstet und konnte keine Antwort auf meine Frage finden. Es gibt bei SelfHTMl ein ähnliches Skript, das den Zeilenumbruch auch nicht interpretiert: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea

Ich hoffe, jemand kann mir bei der Lösung meines Problems behilflich sein. Ich bedanke mich bereits im Voraus für eure Hilfe.

Gruß

DHK

[Christoph Schnauß]

hallo,

function setText () {
    document.getElementById("text_span").firstChild.nodeValue = document.getElementById("Eingabe").value;
  }

Du übergibst "nodeValue" unmittelbar an "value". Wie man Zeilenumbrüche "verarbeiten" kann, kann ich bei Javascript nur vermuten, da habe ich es bisher nie probiert, aber in Perl oder PHP kenne ich dasselbe Problem. Dort behebe ich es, indem ich den eingegebenen Text erst durch einen Regulären Ausdruck so umwandeln lasse, daß aus allen "\n" eben "<br>" werden.
Prinzipiell sollte das auch mit Javascript möglich sein, Reguläre Ausdrücke gint es da schließlich auch.

Grüße aus Berlin

Christoph S.

[D.R.]

Hallo,

Problem: Drücke ich in der <textarea> Enter (sprich einen Zeilenumbruch) und schreibe in der nächsten Zeile weiter, so wird dieser Zeilenumbruch im <div><span> nicht gemacht.

Du könntest den Text entweder in ein http://de.selfhtml.org/html/text/praeformatiert.htm#definieren@title=pre-Element einfügen, oder die Umbrüche jeweils in <br>s umwandeln, was jedoch nicht so einfach ist.

Die Konvertierung würde in etwa so laufen:

  
var ausgabeEl = document.getEl…  
var TextLines = Element.firstChild.nodeValue.split("\n");  
while(ausgabeEl.hasChildNodes()){ausgabeEl.removeChild(ausgabe.firstChild)};  
for (var i = 0; i < TextLines.length; i++){  
 ausgabeEl.appendChild(document.createTextNode(TextLines[i]));  
 ausgabeEl.appendChild(document.createElement("br"));  
}

mfg. Daniel

[MudGuard]

Hi,

Diese Funktion überträgt den eingegeben Inhalt der <textarea> auf den <div><span>.

wozu das span im div?

white-space:pre könnte das sein, was Du suchst.

cu,
Andreas

[DHK]

Hallo,

vielen Dank für den Tipp mit white-space: pre;. Der hat mir echt geholfen, jetzt funktioniert's.
Vielen Dank auch für alle anderen Tipps.

Gruß

DHK

[DHK]

Hallo,
ich habe jetzt ein anderes Problem. Ich habe jetzt white-space: pre bzw. white-space: pre-wrap verwendet. Allerdings hat mein <div> eine padding-Angabe. Ich möchte zwar, dass umgebrochen wird, wenn der Anwender die Enter-Taste drückt, aber auch, dass automatisch umgebrochen wird und das padding eingehalten wird.
http://www.werbung-fuer-sie.de/express/src/letter.php?zoom=4

Gebt dort einfach mal eine längere Zeile ein, ohne Enter zu drücken. Ihr werdet bemerken, dass nicht nur das padding nicht eingehalten wird, sondern sogar über den Rand des <div> hinausgeschrieben wird.

Weiß jemand Rat?

Gruß

DHK

[D.R.]

Hallo,

Gebt dort einfach mal eine längere Zeile ein, ohne Enter zu drücken. Ihr werdet bemerken, dass nicht nur das padding nicht eingehalten wird, sondern sogar über den Rand des <div> hinausgeschrieben wird.

Das ist das typische Verhalten von Block-Elementen, die mit dem Standardwert overflow:visible formatiert sind.

Weiß jemand Rat?

Du könntest das Element per http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:auto scrollbar machen.

mfg. Daniel

[DHK]

Hallo D.R,
vielen Dank. Zumindest schreibt er jetzt schon mal nicht mehr über den Rand. Vielleicht weiß noch jemand, wie ich jetzt noch den automatischen Zeilenumbruch reinkriege, um das padding einzuhalten?
(nähere Problembeschreibung siehe in meinem ersten Beitrag).

Gruß

DHK

[D.R.]

Hallo,

Vielleicht weiß noch jemand, wie ich jetzt noch den automatischen Zeilenumbruch reinkriege, um das padding einzuhalten?
(nähere Problembeschreibung siehe in meinem ersten Beitrag).

Dafür bräuchtest du das besagte white-space:pre-wrap (bzw. white-space:-moz-pre-wrap; für Geckos).

Allerdings wirst du das im IE nicht umsetzen können, weil dieser keins von beiden unterstützt.

mfg. Daniel

[DHK]

Dafür bräuchtest du das besagte white-space:pre-wrap (bzw. white-space:-moz-pre-wrap; für Geckos).

Das habe ich bereits eingestellt. Sowohl der div-Bereich als auch die <textarea> haben white-space: pre-wrap; eingestellt.

Gruß

DHK

[D.R.]

Hallo,

Dafür bräuchtest du das besagte white-space:pre-wrap (bzw. white-space:-moz-pre-wrap; für Geckos).

Das habe ich bereits eingestellt.

Dann dürfte der Text eigentlich nicht mehr aus den Feld fließen. Beispiel

Sowohl der div-Bereich als auch die <textarea> haben white-space: pre-wrap; eingestellt.

Die <textarea> brauchst du nicht damit formatieren, da dies bereits das standard-Verhalten ist. Außerdem haben CSS-Formatierungen keine Auswirkung auf den Inhalt.

mfg. Daniel

[DHK]

Dann dürfte der Text eigentlich nicht mehr aus den Feld fließen. Beispiel

Tut er aber. Als ich overflow: scroll; noch nicht drin hatte, hatte ich auch schon white-space: pre-wrap; drin. Ich werde das aber sicherheitshalber nochmals probieren. Vielleicht liegt's ja auch an meinem CSS:
// die textarea
#Eingabe {
white-space: pre-wrap;
}

// der div (bzw. span)
#text_span {
white-space: pre-wrap;
}

Der <div> wird in einem PHP-Skript formatiert:
// ...
$width = 210 * $zoom;
$height = 297 * $zoom;
$dstandard = 25 * $zoom;
$dunten = 20 * $zoom;
// ...
echo '.........<div id="Text" style="width:'.$width.'; height:'.$height.'; padding-left:'.$dstandard.'; padding-top:'.$dstandard.'; padding-right:'.$dstandard.'; padding-bottom:'.$dunten.'; overflow: scroll;"><span id="text_span">&nbsp;</span></div>';
//...

Gruß

DHK

[DHK]

Der Fehler lag wohl bei mir. Ich habe beim Ausprobieren keine Leerzeichen verwendet, sondern immer nur "123456789123456789123456789usw." eingegeben. Jetzt habe ich es mit normalen Wörtern probiert, und es hat geklappt.
Trotzdem würde mich noch interessieren, ob man das auch steuern kann, das ohne Leerzeichen (also so eine Zeichenkette wie oben, damit die automatisch umgebrochen wird).

Vielen Dank an alle!

Gruß

DHK

[D.R.]

Hallo,

Trotzdem würde mich noch interessieren, ob man das auch steuern kann, das ohne Leerzeichen (also so eine Zeichenkette wie oben, damit die automatisch umgebrochen wird).

Vielleicht irgendwie mit einem Script das alle Wörter durchläuft und in zu lange Wörter eben einen Umbruch einfügt.

Mit HTML ist das nicht möglich. Weder in unformatierten <p/>s, noch in irgendwelchen anderen Elementen.

Eigentlich ist das auch logisch, weil besonders lange Wörter sonst kaum lesbar sind.

mfg. Daniel

[DHK]

Hallo,
vielen Dank für eure Hilfe. Ich habe ja schon ein paar mal den Link zu meinem Beispielskript gepostet, aber ich tu es trotzdem nochmal:
http://www.werbung-fuer-sie.de/express/src/letter.php?zoom=4

Ich habe nämlich noch eine Frage. Ihr seht ja die Formatierungsbuttons wie Fett, Kursiv oder Unterstrichen. Diese funktionieren in etwa so (Beispiel Fett):
var Bold = 0;
function setBold () {
    if(Bold == 0) {
      document.getElementById("Text").style.fontWeight = "bold";
      Bold = 1;
    } else {
      document.getElementById("Text").style.fontWeight = "normal";
      Bold = 0;
    }
  }

Das hat zur Folge, dass der gesamte <div>-Bereich jetzt fett wird. Wie kann ich erreichen, dass ich zum Beispiel auf den Fettbutton klicke, ab jetzt fett schreibe, dann wieder auf den Fettbutton klicke und nun nicht mehr fett schreibe, das vorher Geschriebene aber fett bleibt? Oder meinetwegen auch etwas markiere, auf Fett drücke und nur das Markierte fett wird?

Vielen Dank.

Gruß

DHK

[MudGuard]

Hi,

Die <textarea> brauchst du nicht damit formatieren, da dies bereits das standard-Verhalten ist. Außerdem haben CSS-Formatierungen keine Auswirkung auf den Inhalt.

Wie kommst Du darauf?

Du willst behaupten, daß
<textarea rows="20" cols="20" style="font-family:sans-serif;font-weight:bold;color:red; background:yellow;border:3px solid red; white-space:normal;"></textarea>
keine rote border ergibt, keine rote fette serifenlose (nicht-monospace) Schrift auf gelbem Grund ergibt?

Benutzt Du Lynx als Browser? ;-)

cu,
Andreas

[D.R.]

Hallo,

Die <textarea> brauchst du nicht damit formatieren, da dies bereits das standard-Verhalten ist. Außerdem haben CSS-Formatierungen keine Auswirkung auf den Inhalt.

Wie kommst Du darauf?

Du willst behaupten, daß
<textarea rows="20" cols="20" style="font-family:sans-serif;font-weight:bold;color:red; background:yellow;border:3px solid red; white-space:normal;"></textarea>
keine rote border ergibt, keine rote fette serifenlose (nicht-monospace) Schrift auf gelbem Grund ergibt?

Ähm - ich meinte das anders. Klar wird der Text in der <textarea/> rot, fett und was nicht alles. Aber wenn man ihn mit einem Script weiterverarbeitet, sind diese Formatierungen irrelevant. Es wird einfach nur Text übernommen.

mfg. Daniel