Andy: Textarea Höhe ändern

Hi,

wie kann ich machen, dass ein Textarea immer so groß ist, dass gerade der ganze Inhalt hineinpasst? Wenn man etwas eingibt, soll die Textarea höher werden.

Der Sinn des ganzen ist, dass die Textarea genauso aussehn soll, wie eine Seite mit Text, nur dass man darin herumschreiben kann.

Danke im voraus!

Andy

  1. Hallo Andy.

    wie kann ich machen, dass ein Textarea immer so groß ist, dass gerade der ganze Inhalt hineinpasst? Wenn man etwas eingibt, soll die Textarea höher werden.

    Es gibt keine wirklich zufrieden stellende Lösung.

    Einen Ansatz findest du in diesem Archivthread, doch sogleich darauf folgend auch das Problem daran.

    Einen schönen Dienstag noch.

    Gruß, Mathias

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
  2. Hallo Andy,

    Zwei Sachen mußt Du ermitteln. Du musst die Anzahl der Zeichen pro Zeile bestimmen und Du musst die Anzahl der Zeilenumbrüche bestimmen.

    Es bietet sich als an, den Inhalt mit split("\n"); zunächst in ein Array zu zerlegen. Über length hast Du nun bereits die Anzahl der Umbrüche. Nun ermittelst Du die Länge jedes Element aus dem Split-Array, welches Zeichenketten enthält, wiederum mit length. Ist die Länge größer der Anzahl, die einen "Zeilenumbruch" erzeugen, addierst Du eins dazu. Wenn Du so die Anzahl der Zeilen kennst, kannst Du diese auf die Größe (Höhe) der Area umrechnen.

    So in der Art könnte der Code aussehen:

      
    //Zugriff auf die Textarea  
    var Area = document.getElementsByTagName("textarea")[0];  
      
    //Anzahl der Zeilen ermitteln und in einem Feld speichern  
    var Arr = Area.value.split("\n");  
      
    //diesen Wert speichern  
    var counter = Arr.length;  
      
    //Zulässige Anzahl an Zeichen pro Zeile (hängt von der Breite der Area ab)  
    var maxChar = 50;  
      
    //Prüfen, ob eine Zeile breiter als die zulässige Zahl ist und ggf. den Counter erhöhen  
    for (var i=0; i<Arr.length; i++)  
      if (Arr[i].length > maxChar)  
        counter++;  
      
    //Zuweisen  
    Area.row = counter;  
    
    

    Mit freundlichem Gruß
    Micha

    --
    LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
    1. Hallo Micha!

      Danke, ich denke das ist die beste Möglichkeit.
      Allerdings habe ich Tahoma als Schriftart, d.h. dass nicht immer gleich viele Zeichen pro Zeile sind.
      Außerdem werden Wörter ja auch komplett umgebrochen. Ich denke ich werde nur etwa von einer Zeilenlänge von 90% ausgehen können.

      gruß
      andy

      1. Hallo Andy,

        eine Monospace-Schriftart setzt das ganze wohl schon vorraus. Du könntest auch für jeden Buchstaben die Breite ermitteln und in der Schleife eine weitere laufen lassen, die Dir über charAt(j) das Zeichen liefert. Diese Breiten musst Du addieren und wenn ein bestimmter Wert überschritten ist, den Counter erhöhen...

        Mit freundlichem Gruß
        Micha

        --
        LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
    2. Hallo derletztekick.

      So in der Art könnte der Code aussehen:

      Und ich hatte mir darüber vergeblich den Kopf zerbrochen …

      Zwei Probleme bestehen aber noch:

      1. Im Firefox ist die Textarea auch wenn man die Zeilenanzahl auf 1 setzt immer zwei Zeilen hoch.

      2. Im Konqueror ist immer eine Zeile zu wenig → es muss gescrollt werden. (Trotz overflow:hidden.)

      Einen schönen Dienstag noch.

      Gruß, Mathias

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Hallo Mathias Brodala,

        So in der Art könnte der Code aussehen:

        Und ich hatte mir darüber vergeblich den Kopf zerbrochen …

        Ich verstehe Deine Anspielung leider nicht - sry. In Deinem Antwortposting, welches ich leider zu spät gesehen hatte, hattest Du doch eine ähnliche Lösung vorgestellt. Es fehlt lediglich das ermitteln der Zeichenkettenlänge.

        Zwei Probleme bestehen aber noch:

        Aha, wusste ich nicht. Dann sollte per Default eine Zeile (im Counter) hinzufügen werden um immer einen Balken zu verhindern.

        Mit freundlichem Gruß
        Micha

        --
        LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
        1. Hallo derletztekick.

          So in der Art könnte der Code aussehen:

          Und ich hatte mir darüber vergeblich den Kopf zerbrochen …
          Ich verstehe Deine Anspielung leider nicht - sry. In Deinem Antwortposting, welches ich leider zu spät gesehen hatte, hattest Du doch eine ähnliche Lösung vorgestellt. Es fehlt lediglich das ermitteln der Zeichenkettenlänge.

          Und genau letzteres hatte mir zu schaffen gemacht und angesichts deines Codes fragte ich mich nun warum.

          Zwei Probleme bestehen aber noch:
          Aha, wusste ich nicht. Dann sollte per Default eine Zeile (im Counter) hinzufügen werden um immer einen Balken zu verhindern.

          Das interessiert Konqueror anscheinen nicht im geringsten. Er will stur seinen Scrollbalken. Egal, wenn er nicht will, dann eben nicht.

          Einen schönen Dienstag noch.

          Gruß, Mathias

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hallo Mathias Brodala,

            Und genau letzteres hatte mir zu schaffen gemacht und angesichts deines Codes fragte ich mich nun warum.

            So ganz haut es immer noch nicht hin, wie ich gerade bemerkt habe. Besser wäre wohl ein counter += Math.floor(Arr[i].length / maxChar). Grund ist, das es ja auch länger als eine Zeile sein könnte. Das nur der Vollständigkeit halber.

            Egal, wenn er nicht will, dann eben nicht.

            Ja, dann wird es wohl hier keinen Weg geben...

            Mit freundlichem Gruß
            Micha

            --
            LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein