nicht angemeldet
Textarea mit dynamischer Höhe
Hallo zusammen,
kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre? Scrollbars sollten ebenfalls nicht sichtbar sein.
Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.
Vorab vielen Dank für Eure Hilfe!
Beste Grüße,
Sascha
-
hi,
kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre? Scrollbars sollten ebenfalls nicht sichtbar sein.
Nur mit CSS gar nicht, wenn muss schon Javascript zu Hilfe kommen.
ich habe so etwas mal versucht, es allerdings nicht browserübergreifend befriedigend hinbekommen.
Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.
Dann schau dort nach, wie es realisiert ist.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo Sascha.
kann mir jemand verraten, wie ich es mittels CSS schaffe, daß ein Textarea-Element bei der Eingabe von Daten seine Höhe anpasst - also größer wird - sofern mehr Text eingegeben wurde, als ohne Scrollbar sichtbar wäre?
Mit CSS: gar nicht.
Scrollbars sollten ebenfalls nicht sichtbar sein.
Zu sehen ist dieses u.a. in der aktuellen Version von phpmyadmin.
Wie es dort gemacht wurde, kann ich im Moment nicht sagen, aber ich habe einen Lösungsvorschlag:
<http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=Beim Laden des Dokumentes> speicherst du eine Referenz auf das jeweilige textarea-Element in einer Variable. Dies kannst du zum Beispiel per document.http://de.selfhtml.org/javascript/objekte/forms.htm@title=forms.http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements-Knotenliste oder mit der getElementsByTagName-Methode tun.
Nun deaktivierst du per overflow-Eigenschaft des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objektes die Scrollbalken, indem du den Wert besagter Eigenschaft auf „hidden“ stellst.
Als nächstes weist du dem http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=onkeyup-Event der Textarea eine Funktion zu. Onkeydown käme eigentlich auch in Frage, doch dies führt in IE und Konqueror zu Ruckeleien.
In dieser Funktion nun http://de.selfhtml.org/javascript/objekte/string.htm#split@title=trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea@title=rows-Eigenschaft der Textarea die Anzahl der Elemente in eben erzeugtem Array zu.
Du solltest aber darauf achten sinnvolle Werte für cols und rows im HTML zu notieren, falls JS doch einmal nicht zur Verfügung stehen sollte.
Einen schönen Mittwoch 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]-
Hallo nochmal.
In dieser Funktion nun http://de.selfhtml.org/javascript/objekte/string.htm#split@title=trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea@title=rows-Eigenschaft der Textarea die <http://de.selfhtml.org/javascript/objekte/array.htm#length@title=Anzahl der Elemente> in eben erzeugtem Array zu.
+length
Einen schönen Mittwoch 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] -
hi,
In dieser Funktion nun http://de.selfhtml.org/javascript/objekte/string.htm#split@title=trennst du den Inhalt der Textarea an den Zeilenumbrüchen (\n) auf und weist der http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea@title=rows-Eigenschaft der Textarea die Anzahl der Elemente in eben erzeugtem Array zu.
Beim automatischen Umbruch dürfte kein \n erzeugt werden, jedenfalls nicht beim Default-Wrapping.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Beim automatischen Umbruch dürfte kein \n erzeugt werden, jedenfalls nicht beim Default-Wrapping.
Wo du Recht hast …
In diesem Fall fällt auch mir keine zufrieden stellende Lösung ein.
Einen schönen Mittwoch 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]
-
-