Textfeld dynamisch der Größe anpassen

Teron Gerofied

Hallo,

ich suche ein Script, dass es möglich macht, dass sich eine Textarea dynamisch vergrößert. Ich hab zwar eins gefunden aber das geht nicht richtig. Ich suche so ein Script was das Feld genauso vergrößert wie bei Facebook.

Startartmäßig ist "rows" auf 2 gesetzt.
Hat jemand ne Idee ?

Lg
Teron

synaptic

ja klar.. du machst dir nen verhältnis von row zu col und damit kannste das ding anständig vergrössern via js

Tobse

Bei Facebook bleiben die Cols gleich. Du kannst dieses Script hier benutzen, es sollte "enter" fuer Die Enter-Taste zurueck geben. Dann eben der Textarea ein keydown event geben, die Funktion aufrufen und Zeilenumbrueche zaehlen. Wenn die groeser als die rows der Textarea sind, machste se groeser.

Teron Gerofied

Mein Lösungsansatz ist der folgende:

Code

function adjust(field) {
	var a = field;
	var b = a.value.match(/\n/gi);
	var r = parseInt((a.value.length + 10) / a.cols, 10);
	if (r>0)
		a.rows = r; else a.rows = 1;
	if(b)
		a.rows += b.length;
	a.rows++;
}

Aber das funktioniert mit den Einstellungen rows=2 und cols=40 nicht wie gewünscht, hat jemand ne idee ?

Tobse

Was machst du denn da fuer rechnerreien fuer r?!?

HTML

<textarea name="bla" rows="2" cols="40" onkeydown="if (keypress(event)=='enter')adjust(this);"></textarea>

Code

function adjust(element) {
    var br=element.value.split("\n").length;
    if (br>2) element.rows++;
}

Ich habe es nicht getestet, sollte aber funktionieren.

Dodo

Ich kenn zwar keine annehmbar gute Lösung, aber Tobses Ansatz ist unvollständig.
Denn bei längeren Zeilen wird kein Enter gedrückt, aber trotzdem eine neue Zeile angefangen.
Man müsste die Länge des Texts in jeder Zeile auch noch prüfen.

Teron Gerofied

Zitat von Dodo

Ich kenn zwar keine annehmbar gute Lösung, aber Tobses Ansatz ist unvollständig.
Denn bei längeren Zeilen wird kein Enter gedrückt, aber trotzdem eine neue Zeile angefangen.
Man müsste die Länge des Texts in jeder Zeile auch noch prüfen.

genau darum gehts ... das textfeld bei einem enter zu vergrößern ist keine kunst es geht mir um die "zu langen" texte ...

Teron Gerofied

Man müsste nur irgendwie rauskriegen wieviele zeichen pro zeile sind auch wenn man keinen manuellen textumbruch macht

The User

Dir ist schon klar, dass man in Textfeldern in der Regel keine Monospace-Schrift eingestellt hat?

Tobse

Kann man nich der Textarea ein White-space: nowrap; geben? Oder iwie anders mit CSS erzwingen, dass eine zu lange Zeile nicht einfach umbricht, sondern zum \n wird? Wenn das geht, dann muss man aber natuerlich die textarea anpassen;

HTML

<!-- onkeypress anstadt down -->
onkeypress="adjust(this);"

Teron Gerofied

ich hab auch schon daran gedacht, die Idee wäre wrap="physical" gewesen aber das haut nicht hin ...

hab auch versucht den js code von facebook anzuschauen aber das ist ja so derb komprimiert und unleserlich, da geht garnix

aber ich hab in deren textfeld mal alle möglichkeiten ausprobiert, es funktioniert wirklich genau so wie es soll und die haben auch keine monospace schriftart, also dürfte es gehen

EDIT:
ich glaub ich hab das facebook ding soweit entschlüsselt, dass das mit minHeight und offsetHeight funktionieren dürfte

EDIT 2
Mit scrollHeight sollte es perfekt funzen

Teron Gerofied

Ok, irgendwer kommt einem immer zuvor ;D

Für alle die sowas auch brauchen könnten: http://james.padolsey.com/javascript/jqu…gin-autoresize/ ein super jquery plugin

Tags