# textarea automatische höhe (autorows)



## pasciii (6. November 2003)

hallo

ist es irgendwie möglich ein <textarea></textarea> tag mit automatischer höhe zu erzeugen?

Beispiel:

<textarea>Hier kommt mein text hier kommt mein text </textarea>

Nun muss ich ja hier im feld scrollen, wenn ich nicht das attriput rows="3" oder so hinzufüge. nun möchte ich das er mir das feld eifnach genau so hoch macht wie nötig

gibt es da eine lösung?

mfg

pasci


----------



## cham (6. November 2003)

wenn dann kannst du mit einem javascript mal versuchen das attribut row zu ändern.  irgendwie mit nem 


```
onKeyUp="if(irgendwas){Event this.rows='this.rows + 1'}"
```

Musst natürlich noch irgendwie ermitteln, wann Du die row eins hoch- oder runternehmen musst. Am besten geht das dann wohl in ner funktion zu machen. 

Gruss cham


----------



## Andreas Gaisbauer (6. November 2003)

> _Original geschrieben von cham _
> 
> 
> ```
> ...


Gute Idee... wird aber leider nicht funktionieren, da die "rows" und "cols" readonly sind und sich nicht on the fly schreiben lassen 

bye


----------



## Andreas Gaisbauer (6. November 2003)

So, hab mal ein bisschen getrixt . Das Ganze funktioniert unter IE + Mozilla in den aktuellen Versionen (in alten hab ich's nicht getestet). Folgendes muss erfüllt sein, damit es läuft:
- Die Textarea muss in einer Div / Span noriert sein
- Diese Div braucht eine eindeutige ID
- "chars" muss mit der Anzahl der Zeichen pro Zeile vorbelegt werden.
- rows und cols müssen angegeben sein (auch wenn es nur eine row ist), da es sonst einen Fehler zurückliefert.


```
<html>
<head>
    <script type="text/javascript">
    var text;
    var chars=30;
    
    function expand(text){
      with(document.test.area1){
        if(value.length>chars){
          document.getElementById('expandable').innerHTML = '<textarea name="area1" rows="'+(rows+1)+'" cols="30" onKeyDown="expand(this.value)">'+text+'</textarea>';
          document.test.area1.focus();
          chars += cols;
          return true;
        }
        return true;
      }
    }
    </script>
</head>
<body>
<form name="test">
<div id="expandable">
  <textarea name="area1" rows="1" cols="30" onKeyDown="expand(this.value)"></textarea>
</div>
</form>
</body>
</html>
```

Diese Version ist jetzt nur für zu begin einzeilige Textareas gedacht, lässt sich aber leicht erweitern...


bye


----------



## Fabian H (7. November 2003)

Du könntest auch einfach versuchen, die Höhe per CSS zu ändern.
Ungefär so:

```
window.document['oForm']['oTextarea'].style.height = (iLineHeight * iRows) + "px";
```


----------



## cham (7. November 2003)

@Andreas Gaisbauer

Wenn Du die Id des Textareas hast, brauchst du auch kein DIV Tag drumrum. Habs zwar nicht ausprobiert, aber ich kenne das aus anderen Problemstellungen. 

einfach dem textarea eine id geben und per getElementByID darauf zugreifen. Im günstigsten Fall kann man das Object per this auch gleich an die Funktion übergeben, also das value erst oben auswerten. 

dann auf dem übergebenen obeject die rows ändern und fertig. Falls das nicht geht, einach mit 
	
	
	



```
aObject.setAttribute("rows", rows + 1);
```
 das rows attreibut neu setzen.

Der umgekehrte Fall, also wenn die Zeichen weniger werden müsste dann auch noch betrachtet werden. Ich schau mal, ob ich heute abend im Zug nen Sitzplatz hab, dann werd ich es mal machen.

Zuhause wartet leider meine Freundin mit nem fetten Terminplan fürs WE.

So long cham


----------

