Hilfe bei mitwachsenden Textboxen.

[kralo]

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]

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]

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]

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

 

[faetzminator]

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]

so seh ich das auch