Ergebnis 1 bis 6 von 6

Thema: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

  1. #1
    SYS64738

    Moderator

    Avatar von thom53281
    Registriert seit
    Jul 2013
    Beiträge
    5.875
    ngb:news Artikel
    46

    Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    Hallo zusammen,

    stehe hier leider gerade auf dem Schlauch, was das Problem betrifft. Im Grunde möchte ich eigentlich nur eine Textarea auf einer Website zweizeilig bekommen, da die für mich relevanten Infos am immer am Ende des Textes stehen und ich sonst immer das Feld ausklappen muss.

    Folgendes ist gegeben:
    Code:
    <textarea class="text sr" wrap="off" cols="20" maxlen="255" readonly rows="1"></textarea>
    Die Textarea hat dabei tatsächlich keinen Inhalt, sondern wird dynamisch über Javascript befüllt. Mein erster Ansatz war natürlich nun per User-Javascript mit innerHTML und einem Regex das wrap="off" zu entfernen. Funktioniert auch, aber sobald ich Änderungen am HTML-Markup vornehme, geht die dynamische Befüllung des Feldes verloren. Ich kann daher auf diese Art und Weise keinerlei Änderungen am HTML-Markup vornehmen sondern muss das irgendwie per CSS geradebiegen.

    Folgende CSS-Regeln bringen aber keinen Erfolg:
    Code:
    textarea {
    height: 42px !important;
    word-wrap: break-word !important;
    text-wrap: normal !important;
    }
    Ideen, was man da machen könnte?

  2. #2
    ★★★★☆ (Kasparski) Avatar von Jester
    Registriert seit
    Dec 2014
    Ort
    Code Azure
    Beiträge
    5.992
    ngb:news Artikel
    2

    Re: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    Kannst Du nicht den dynamisch generierten Inhalt zwischenspeichern, dann das Markup ändern und wieder zurückschreiben?

    Nicht durchdacht, s. unten
    Geändert von Jester (29.06.18 um 07:48 Uhr)
    Die Welt ist grau. Und bunt!

  3. #3
    SYS64738

    Moderator

    (Threadstarter)

    Avatar von thom53281
    Registriert seit
    Jul 2013
    Beiträge
    5.875
    ngb:news Artikel
    46

    Re: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    So einfach scheint das nicht zu gehen. Die Textarea wird zwar mit Javascript befüllt, hat aber dennoch auch nach dem Befüllen keinen Inhalt im Quelltext/Inspector. Keine Ahnung, wie das genau technisch funktioniert, hab ich noch nicht wirklich kapiert.

  4. #4
    ★★★★☆ (Kasparski) Avatar von Jester
    Registriert seit
    Dec 2014
    Ort
    Code Azure
    Beiträge
    5.992
    ngb:news Artikel
    2

    Re: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    Im sichtbaren Quelltext nicht, aber im Objektbaum. Heißt, Du kannst ganz normal den .value abfragen und speichern, dann das Markup ändern und dann den Inhalt wieder reinschreiben.

    Ohne mich versichert zu haben, wundere ich mich aber ein bisschen über den Umstand, dass ein Ändern des Markups den Inhalt beeinflussen soll, das dürfte es eigentlich nicht. Kann es sein, dass das Ändern des Markups das Problem ist? Kannst mal posten bitte?

    Fix hingerotzt:

    Spoiler: 

    <!doctype html>
    <html>
    <head>
    <style type="text/css">
    *{
    font-family: Verdana,sans-serif;
    font-size: 10pt;
    color:black;
    margin:0;
    padding:0;
    }
    body{
    background-color:#f0f0f0;
    text-align:center;
    }
    textarea{
    background-color:#2060d0;
    margin:200px auto;
    display:block;
    color:white;
    }
    </style>
    <title>Textarea</title>
    <script type="text/javascript">
    function fillContent(){
    document.getElementById('test').value = 'zf pouzf uzfuz f upof ouft out dt do tzd iotzd oztd trzd oitz';
    }
    function showContent(){
    alert(document.getElementById('test').value);
    }
    function changeRows(){
    document.getElementById('test').rows = '4';
    document.getElementById('test').wrap = 'hard';
    }
    </script>
    </head>
    <body>
    <textarea class="text sr" wrap="off" cols="20" maxlen="255" readonly rows="1" id="test"></textarea>
    <button onclick="fillContent()">1. Textarea dynamisch füllen</button>
    <button onclick="showContent()">2. Inhalt anzeigen</button>
    <button onclick="changeRows()">3. ROWS & WRAP dynamisch ändern</button>
    <button onclick="showContent()">4. Inhalt anzeigen</button>
    </body>
    </html>


    Kann es vlt sein, dass das "wrap='off'" problematisch ist? Die möglichen Werte sind 'soft' (default) oder 'hard' - auch wenn mein Beispiel das überschreibt...
    Für diesen Beitrag bedanken sich thom53281, KingJamez
    Geändert von Jester (25.06.18 um 17:17 Uhr)
    Die Welt ist grau. Und bunt!

  5. #5

    Re: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    Im Quellcode siehst du js Manipulation nicht, nur im generierten Dom - den siehst du mit den dev-tools der Browser. Falls du es dann immer noch nicht siehst, kannst du in chromium Browsern auch den shadow-dom sichtbar machen, sollte aber eigentlich nicht nötig sein.

    Und das was jester sagt, natürlich.

  6. #6
    SYS64738

    Moderator

    (Threadstarter)

    Avatar von thom53281
    Registriert seit
    Jul 2013
    Beiträge
    5.875
    ngb:news Artikel
    46

    Re: Textarea - Zeilenumbruch erzwingen trotz wrap="off"

    Hm, ja, wenn man dann die fertige Lösung vor sich sieht, ist das wirklich einfach. Mein Ansatz war wieder mal viel zu kompliziert gedacht. Man merkt dann doch, dass ich eher unbedarft mit Javascript bin, weil ich das praktisch nie brauche. Aber das document.getElementById('test').wrap = 'hard'; war im Grunde genau das, was ich brauchte, denn beim Ändern des Markups mit innerHTML ging eben immer der Inhalt verloren. Wobei ich ursprünglich das Element gar nicht so selektieren konnte, aber nun doch eine Möglichkeit gefunden habe, das so zu tun. Vielen Dank!

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •