# Hilfe bei mitwachsenden Textboxen.



## kralo (14. Jun 2012)

Ich kenne mich leider nur mit Html und CSS aus und bräuchte bei einem Script Hilfe. Es geht darum Text-Boxen mit dem Inhalt mitwachsen zu lasen. Ich habe da auch ein Skript gefunden das Problem ist nur das die Boxen auf die ich es anwenden will nie die gleiche ID haben und ich im Vorhinein nicht weis  welche ID sie haben.
Darum würde ich es gerne über die Klasse machen, leider weiß ich nicht wie man das Skript anpassen muss. Wäre für jede Hilfe sehr sehr  Dankbar.
Hier das Skript.

```
<script type="text/javascript">
//<![CDATA[
function expandTextarea(id) {
document.getElementById(id).addEventListener('keyup', function() {
this.style.overflow = 'hidden';
this.style.height = 0;
this.style.height = this.scrollHeight + 'px';
}, false);
}
expandTextarea('expand');
//]]>
</script>
```

Die Textboxen:

```
<textarea rows="1" cols="16" name="sbshout<?php echo $sbid ?>" id="sbshout<?php echo $sbid ?>" class="inputbox"></textarea></div>
```


----------



## Evil-Devil (14. Jun 2012)

Zunächst einmal nimm die Rows und Cols aus der Textarea heraus.

Dann ist dir wie man an deinem Code sieht die ID sehr wohl bekannt. Des weiteren sind selbstwachsende Textfelder Igittibäh. Mach besser zusätzliche Schaltflächen.

Und zu deinem eigentlichen Problem:
Verwende Prototype oder jQuery. Die bieten beide CSS Selektoren Funktionen an. Denn sonst musst es erst wie die Frameworks von Hand das DOM durchlaufen und nach dem Selector suchen.

Alternative:

```
<script type="text/javascript">
//<![CDATA[
function expandTextarea(obj) {	
	if (obj !== null) {	
 		this.style.overflow = 'hidden';
		this.style.height = 0;
   		this.style.height = this.scrollHeight + 'px';  	
	}	
//]]>
</script>

<textarea name="sbshout<?php echo $sbid ?>" id="sbshout<?php echo $sbid ?>" onkeyup="expandTextarea(this); return false;" class="inputbox"></textarea>
```

Allerdings erscheint mir das Verhalten der Funktion mehr als seltsam. Man würde ein wachsen erst nach n Zeichen oder n Zeilen  erwarten. 

Meine Empfehlung: Setze dich mit Javascript auseinander. So schwierig sind die Grundlagen nicht. Und oder verwende ein entsprechendes JS Framework.


----------



## kralo (14. Jun 2012)

Ich habe hier schon eine halbe Lösung meines Problems. Es funktioniert aber leider ist meine Textbox in einem Joomla Modul und da greift es schein bar nicht. 


```
function expandTextarea(id) {
    var $element = $('.myclass').get(0);  
    
    $element.addEventListener('keyup', function() {
        this.style.overflow = 'hidden';
        this.style.height = 0;
        this.style.height = this.scrollHeight + 'px';
    }, false);
}

expandTextarea('txtarea');
```


JavaScript Auto Expand Textarea - jsFiddle


----------



## Evil-Devil (14. Jun 2012)

Bei mir funktioniert nicht einmal das Beispiel...das bleibt die ganze Zeit einzeilig...
FF 13


----------



## faetzminator (18. Jun 2012)

Da wird JQuery verwendet, um das Element zu finden 
Wieso verwendest du nicht grundsätzlich JQuery, wenn du den Select bereits dadurch machst!?
Das wär dann irgendwas wie

```
$('.myclass').keyup(function() {
    $(this).css('overflow', 'hidden').css('height', $(document).scrollTop());
    // willst du hier scrollTop() oder height()?
}
```


----------



## wutzebaer (2. Jul 2012)

so seh ich das auch


----------

