Chräcker Heller: Wagenrücklauf/Zeilenumbrüche bei Textareas

Hallo,

nach längeren Archivrecherchen ist das folgende Problem fast so beliebt wie die 2-Framefrage: nutzt nichts, ich komme nicht weiter ;-)

Ich möchte den Inhalt eines Textareas "1 zu 1" in ein Div bekommen.

Der Text in einem Texarea kann ja zweimal "umgebrochen" sein. Einmal, weil der Benutzer die Enter-Taste gedrückt hat, und dann durch den automatischen Umbruch am Ende der Zeile.

Erstes bekomme ich, in dem ich alle \n (Zeilenvorschubzeichen) per replace(/\n/,"<br>" in einer Schleife gegen <br> tausche. (ich hätte ja eher \r vermutet, und was andere Systeme als Windows da haben will ich jetzt erst mal nicht so genau wissen ;-))

Aber wie bekomme ich den automatischen Umbruch ersetzt, den das "System" am Ende der Zeile selber einfügt? (da es eh alles noch etwas neuland ist, habe ich die verschiedensten Kombinationen und die verschiedensten Archivideen probiert, aber irgendwas mache ich falsch....)

Chräcker

  1. Hallo,

    Denkansatz:
    Du koenntest Deinen gesamten Inhalt mit escape() nach ASCII umwandeln, dann wuesstest Du schonmal mit Sicherheit, was ueberhaupt ankommt. Du koenntest im PHP-Manual nach nl2br und verwandten Funktionen schauen. Mit denen kannst Du in JavaScript natuerlich nichts anfangen, aber die bringen Dich vielleicht auf gute Ideen und wer sowas Feines wie Stempelgeheimnis basteln kann, muss ja ein Typ mit guten Ideen sein.

    Dieter

    1. Hallo,

      Denkansatz:

      und kein schlechter ,-) Nachdem ich gerade mal schnell getestet hatte, ob ich php nutzen kann (ja) dachte ich mir, mach ich es dann eben in php, mal was neues zum lernen. nur: ich sende den Inhalt des Areas gar nicht ab, und da nutzt mir die Serverseitige Sprache nicht. Außer, wie Du es ja auch meintest, als Denksanstoß ;-)

      Danke auf jedenfall für die Blumen ,-)))

      Chräcker

  2. Hallo, Chräcker!

    Ich möchte den Inhalt eines Textareas "1 zu 1" in ein Div bekommen.

    Herzliches Beinkleid;-)

    Zur Erklärung:
    Ich habe das auch mal versucht, und mich wahnsinnig über mozilla ge-
    freut, da dieser nach einem wrap="hard" die Umbrüche in Form von \n
    weitergeleitet hat. Aber die Entwickler hatten das wohl irgendwie als
    Bug deklariert und nicht als Feature *grmpf*

    Also die einzige Chance die ich sehe, da es nicht möglich ist, die
    virtuellen Zeilenumbrüche per JavaScript zuverlässig auszulesen muss du chunken. Solange du mit monospace Schriftarten arbeitest, geht das
    recht entspannt, denn du weißt, wie lang eine Zeile sein darf sein.
    Allerdings habe ich gerade keinen wirklich zuverlässigen Chunker zur
    hand.

    Was du alternativ machen kannst(ungetestet). Wenn du das Form ab-
    sendest, werden die Zeilenumbrüche ja definitiv erzeugt (wrap=hard).
    Da du aber nicht mit CGI arbeitest(so wie ich das verstanden habe),
    sendest du das Form auch nicht an einen Server, sondern an eine html-
    seite. Die liest dann per location.search den String ein, unescape()
    entsorgt die Hexaentities und du hast deine Zeilenumbrüche als \n
    oder \r\n die du per <br> erschlagen kannst.

    bye eddie

    1. Hallo,

      Solange du mit monospace Schriftarten arbeitest, geht das
      recht entspannt, denn du weißt, wie lang eine Zeile sein darf
      sein.

      Als Rheinländer kenne ich schunkeln, aber chunken? ,-) Aber ich nehme mal an, Du meinst, die Zeilen nacher "von hand" umbrechen, indem ich alle x Zeichen ein br in die letzte Space-Lücke einsetze? Das würde gehen, aber was für ein Aufwand.

      Wenn du das Form ab-
      sendest,

      Das ist es ja auch noch, ich sende das nie ab ,-) Nach einem klick auf eine Grafik wird lediglich der inhalt des Areas ausgelesen (value) und dann eben verarbeitet. (und in einem Div dargestellt....) Habe ich Deinen Rest dann richtig verstanden, das er mir dann nicht hilft? Ich hab den Inhalt ja als, äh, also eben nicht als Hexacode. und wenn ich den erst umwandel, dann bekomme ich ja auch keine /n /rs oder ähnliches, oder? (Es schwirrt etwas in meinem Hirn ;-))

      Chräcker

      1. Hallo,

        Als Rheinländer kenne ich schunkeln, aber chunken? ,-) Aber ich nehme mal an, Du meinst, die Zeilen nacher "von hand" umbrechen, indem ich alle x Zeichen ein br in die letzte Space-Lücke einsetze? Das würde gehen, aber was für ein Aufwand.

        Ja, es heist von hand auseinandernehmen. Nein es ist nicht zu aufwän-
        dig. (RegExp kann helfen, nur NN4 macht Ärger)

        Das ist es ja auch noch, ich sende das nie ab ,-) Nach einem klick auf eine Grafik wird lediglich der inhalt des Areas ausgelesen (value) und dann eben verarbeitet.

        Das hatte ich befürchtet. Aber wenn du sendest ist es die einfachste
        Lösung. Ich ducke mich mal ;-) Kannst du das Textarea nicht in einem
        -achtung böses wort- "PopUp" aufmachen und es dann an das
        elternfenster(parent.window) senden, wo das "div" wartet? Ich weiß
        ist umständlich...

        (und in einem Div dargestellt....) Habe ich Deinen Rest dann richtig verstanden, das er mir dann nicht hilft? Ich hab den Inhalt ja als, äh, also eben nicht als Hexacode. und wenn ich den erst umwandel, dann bekomme ich ja auch keine /n /rs oder ähnliches, oder? (Es schwirrt etwas in meinem Hirn ;-))

        Ich bin untröstlich, aber das hexzeugs bekommst du nur, wenn du sendest. Ansonsten brauchst du es nicht.

        Zum Testen. Beide files in selbes directory.
        ----------------------------------------------------
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
        <title>Zeilenumbruch in Textfeldern</title>
        </head>
        <body>
        <form action="auswertung.html">
        <p>hard:<br>
        <textarea name="hard" cols="30" rows="3" wrap="hard"></textarea>
        </p>
        <input type="submit" value="Absenden" style="background-color: #00FF00;">
        </form>
        </body>
        </html>

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
        <title>Auswertung eines Formulares</title>
        <script language="JavaScript1.2" type="text/javascript">
        <!--
        var temp=self.location.href.split(/?/);
        var parameter = temp[1];
        felder = parameter.split(/&/);
        for(var i=0; i<felder.length; i++) {
            var feld = felder[i].split(/=/);
            if (feld[1]) {
                feld[1] = feld[1].replace(/+/g, " ");
                feld[1] = unescape(feld[1]);
                feld[1] = feld[1].replace(/\n/g, "<br>");
            } else
                feld[1] = " ";
            document.write(feld[0] + " = " + feld[1] + "<br><br>");
        }
        -->
        </script>
        </head>
        <body>
        </body>
        </html>
        --------------------------------------------------------------
        So viel zum "senden", wenn es machbar ist. Ich habe irgendwo noch
        einen nicht 100%igen RegExp zum zerlegen von Text in JavaScript.
        Mithilfe des Forums wäre der noch perfektionierbar. Aber wiegesagt,
        der liegt irgendwo... (und außerdem, zuverlässig geht das dann
        sowieso nur mit monospaced fonts)

        bye eddie

        1. Hallo,

          dig. (RegExp kann helfen, nur NN4 macht Ärger)

          den lasse ich hier eh außen vor ;-)

          Lösung. Ich ducke mich mal ;-) Kannst du das Textarea nicht in
          einem -achtung böses wort- "PopUp" aufmachen

          ;-) Ne, das wird nämlich so sein: Auf der Seite kann man sich das Area einblenden lassen (klick auf eine Grafik), damit kann man auf der Seite schreiben. Klickt man wieder auf die Grafik, verschwindet das Textarea und an der gleichen Position erscheint das Div, in welchem eben der Text erscheinen escheint. Der Besucher merkt vom ganzen Aufwand quasie gar nicht sondern kann sich, aus seinenm blickwinkel, einfach per klick auf besagte Aktivierungsgrafik einen Cursor in den Seitentext herbeizaubern und diesen ädnern. (Naja, IE-Surfer bekommen dann immer noch diesen dämlichen, weil hier sinnlosen, Scrollbalken zu sehen, aber IE-Surfer kommen ja fast nach NS4-Surger (duck)

          Aber Deine "RegExp" Bemerkung gibt mir wieder Hoffnung, denn ja, ich nutze hier Courier. Werde also mal fahnden....(Wenn natürlich Besucher meine Schriftgrössenangaben aushebeln hört der Spaß wieder auf, aber so aufmüfige besucher wollen wir ja nicht ,-))

          (wenn Du Deine Zerpflückroutine findest, dann schick sie trotzdem mal rüber, dann kann ich mal schauen, wie es gehen könnte ,-))

          Chräcker

          1. Hallo Chräcker,

            Ähm...letzter Versuch bevor ich suchen gehe, versprochen ...
            Wie wäre es, wenn du per versuchst, keyboard-events auf dem div
            abzufangen und sie dann als String aufeinanderzufädeln um sie mit
            jedem Tastaturdrücken erneut in das Div zu schreiben. Das kann aller-
            dings besonders bei Schnelltippern zu verzögerungen bei der Eingabe
            und besonders bei der Darstellung führen. Aber du hast auf jeden
            Fall perfektes Layout in Übereinstimmung.

            So wenn du mich suchst, laut rufen. Ich bin mal kurz auf Tauchstation,
            die Cd mit dem snippet suchen...

            Grüße aus Leipzig,
            bye eddie

            1. Hallo,

              wart mal (oder mach ne Pause ;-)) bei Deinr Tauchstation, habe mir gerade das Brett vorm Kopf wegreissen lassen, Problem ist gelöst (schreibe ich gleich oben in den Thread rein;-)

              Aber: die Idee, direkt mit der Tastatur zu arbeiten, ist auch nicht so doof, da fehlt nur die konfortabel Taststurunterstützung, denn jetzt del, cursortasten etc nachzubilden ist doch etwas zu viel der mühe ;-)

              Chräcker

  3. Moin!

    Ich möchte den Inhalt eines Textareas "1 zu 1" in ein Div bekommen.

    Der Text in einem Texarea kann ja zweimal "umgebrochen" sein. Einmal, weil der Benutzer die Enter-Taste gedrückt hat, und dann durch den automatischen Umbruch am Ende der Zeile.

    Erstes bekomme ich, in dem ich alle \n (Zeilenvorschubzeichen) per replace(/\n/,"<br>" in einer Schleife gegen <br> tausche. (ich hätte ja eher \r vermutet, und was andere Systeme als Windows da haben will ich jetzt erst mal nicht so genau wissen ;-))

    Es gibt keine verläßlich wirkende Methode, alle Browser dazu zu veranlassen, die automatischen Zeilenumbrüche in einer Textarea als harte Newline-Zeichen zu senden. Das wrap-Attribut ist eben nicht im HTML-Standard enthalten (http://www.w3.org/TR/html401/interact/forms.html#h-17.7).

    Also kriegst du niemals die Information, wo der Browser noch umbricht. Und ich finde das durchaus gut so, weil es meiner Erwartung entspricht: Wenn ich einen harten Zeilenumbruch in die Textarea eingebe, dann soll das Ergebnis ein echter Zeilenumbruch vom Typ <br> sein - wenn ich nichts eingebe, soll das Ergebnis ein automatischer Zeilenumbruch sein.

    Außerdem kannst du gar nicht hinreichend genau beeinflussen, wie groß die Textarea nun wirklich angezeigt wird und wieviele Zeichen dort in eine Zeile gehen. Selbst wenn mit CSS ja eine sehr weitgehende Formatierung möglich ist: 1. kann der Besucher durch ein User-Stylesheet diese Vorgaben (insbesondere die Schriftgröße und vielleicht auch die Schriftart) abändern, und zweitens haben manche Browser beim Start eine deaktivierte Scrolleiste, andere hingegen eine unsichtbare, die erst eingeblendet wird (und Platz wegnimmt), wenn der Text über den Textareaplatz hinausgeht.

    Mit anderen Worten: Mach dein DIV so breit, dass erfahrungsgemäß ungefähr die Breite der Textarea eine Zeile ausfüllt und es grob "so ähnlich" aussieht. Und pack dann eine "nl2br"-Funktion rein, die die eingegebenen Zeilenumbrüche (und ggf. auch die vom Browser eingefügten) in <br> umwandelt. Mehr kannst du nicht tun.

    - Sven Rautenberg

    --
    "Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)
  4. Hallo,

    erst mal Danke an alle! Ich hatte ein Brett vorm Kopf, und Sven hats mir indirekt abgerissen. Ich war auf der falschen Fährte. Ich hatte nämlich vor dem <br>-einfügen alle Spaces in nonbreaking Spaces geändert ;-) (denn die Lücken durch "Leertasten festhalten" verschwinden ja auch erst mal....) - was dann dazu führte, daß beim Div mit fester Breite der Inhalt mangels overflow-regel über den Rand hinausgeschoben wird. (Nonbreaking heist eben Nonbreaking ;-))

    Lasse ich erst mal die Spaces in Ruhe, bricht der Text im Div auch gewünscht um. Solange ich eben keine Leerzeichen aneinander setze ;-)

    Ich glaube, ich drösel das Problem noch mal für mich von vorne auf.

    @Sven: Du hast natürlich recht, das dies alles auf tönernden Füßen steht, vor allem der inaktive Scrollbalken des IE und die Möglichkeit der Schriftgrößenaushebelung macht mir zu schaffen.... mal sehen, noch geb ich nicht auf ,-)

    Chräcker

    1. Moin!

      Lasse ich erst mal die Spaces in Ruhe, bricht der Text im Div auch gewünscht um. Solange ich eben keine Leerzeichen aneinander setze ;-)

      Und dagegen kann man ja auch was unternehmen: Wenn zwei oder mehr Leerzeichen hintereinanderstehen, kann man die ersten oder letzten (bis auf eines eben, damit es dennoch umbricht) dann durch   ersetzen. Das Forum hier schafft es ja auch irgendwie,       längere      Spacelücken            hinzukriegen.

      - Sven Rautenberg

      --
      "Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)
      1. Hallo,

        Danke, genauso hatte ich es bereits gemacht ;-) Komischerwiese verschluckte er noch ein einzelnes Leerzeichen am Anfang des Areas (das ja auch ohne nonbreaking hätte dargestellt werden müssen) aber das war nun wirklich das kleinste der kleinen Probleme ,-)

        Jetzt ist alles fertig und in meiner Stempelpostkartenseite für IE und mozilla (etc) Nutzer drin. (Mal sehen, wie lange das ganze auf diesen tönernden Füßen steht, aber mein Publikum ist durch die 6-Filterseiten vor der Kartenseite schon enorm gesiebt ,-)))

        Chräcker